3

How to insert Line Dividers into a page or table form

Hello all, 

I'm writing to share a helpful workaround. Today, I realized that Ninox doesn't have a direct way to insert a Line divider into a page or table form. Unlike Line break or Space, there is no such element in the Layout elements.

Since Line dividers help create a clear visual hierarchy and improve the overall user interface, I thought I would make a demo database about this topic, especially for new users.

As you can see in the attached database, I use two different approaches for inserting a Line divider:

  1. By taking advantage of a Heading Layout element. The trick is to use the exact text and background color with the page or form background color. Just choose only the Top or Bottom Border style.
  2. By introducing a function field with html(). Add a <hr> tag and style it using CSS. Again, you should take care that the background of the function field is the same as the page or form background color and select "none" for Border style.

In addition, a trick I often use is to set the color of table form or page background to RGB(247,248,253) because that is the default background color of the Ninox fields, making the latter blend nicely.

Also, I use function fields to make labels (another missing Layout element).

How do you make Line dividers? Please share with us.

Have fun🙂

1 reply

null
    • Database App Developer
    • vermau81
    • 5 mths ago
    • Reported - view

    Hello  , I learnt yesterday that we can also use the Free Text element to create section dividers. Just make the text color transparent and use the bottom border.

    I still am of the opinion that Ninox should provide a Horizontal, Vertical line and Label elements as part of their pack as these are very basic elements for an app to design UI. I wonder how could Ninox forget about these elements.

Content aside

  • 3 Likes
  • 5 mths agoLast active
  • 1Replies
  • 115Views
  • 2 Following