Hidden rows, hidden borders

The problem

Below you see a little table. It has some rows, some colors, some borders, the usual. As table as a table can be.

A table with all rows visible

One remark: the last row has a hide-when formula on the cells, so when certain conditions are met, the row is hidden and this is how it looks like then:

A table with one hidden row

The hide-when formula not only hides the cells, but also the top border of them, resulting in a table with an open end. Obviously, that’s not what we wanted here!

A good solution: table borders to the rescue

Tables have also table borders (apart from cell borders). If we hide the top border for the hidden cells and add the bottom border for the table, it looks like this in designer:

Table borders to the rescue

Theoretically, this is a good solution, but when the row is shown, you’ll notice an ugly extra space of 1 pixel (watch close enough):

Table borders creating a 1px gap

The ghost-white pixels even follow the table when the row is hidden:

Table borders creating a 1px gap with hidden row also

A better solution: adding another row

I added a row between the shown part and the part that can be hidden.

An extra row in Designer

This row is special for 2 reasons:

  1. Font-size is only 2pt to keep the row height small, but nevertheless selectable in Designer.
  2. The row has a hide-when formula that is exactly the opposite of the hide-when formula of the row below.

An extra row in Designer

Here’s the proof. In “shown” modus it looks like this:

Border is always shown

In “hidden” modus it’s also ok now (almost pixel-perfect, there’s one pixel missing in the right corner for the real perfectionists)

Hidden row, no hidden border

When the row-to-hide has the same color as the other rows

… then it’s a bit easier: add an extra row, font-size 2pt below the hide-when row. The border we need is now at the bottom.

An extra row at the bottom

The little downside is a row a bit higher than the rest of the rows.

The result from an extra row at the bottom

Demo

I added my little demo tables as a downloadable borderdemo database, because it’s often clearer to see things work than to read about it. Take a look at form test in Designer and in the client.

Alternatives?

Maybe I overcomplicated things? Maybe I overlooked the obvious? Maybe I’m simply not using Designer as intended? Feel free to comment and add your own way of dealing with this Notesquirk!

4 Comments

  1. Hi,

    Reply
  2. That’s a nice work-around, I am sure I will use it.
    I have been using a single pixel row below the last row that never disappears to get around this issue.The row is colored the same as your header row.

    Reply
  3. Quite an old post ! but helped me even after 5 years after its published :) ! Thank you so much :) ! !

    Reply
    • Great to hear! Some information is timeless I guess. At least in the Domino world ;-).

      Reply

Leave a Reply to Martin Vereecken Cancel reply

Your email address will not be published. Required fields are marked *

27 − 17 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>