Placement of Header

1

Using AppStudio 7.0.2 with Boostrap 4 controls, how can the header be postioned other than at the top of the form, ie to form a footer (as Wiki) or to incorporate the iOS status bar (as tech note).

With form and header position set to absolute and position:absolute; in the header style, the header is always located at the top of the form, no matter what values are entered for top or bottom.

2

The Header is a simple Container. Use a Container instead, with top set to what you want and width set to 100%.

3

Thanks. This works except that for a footer, setting bottom = 0 means that the footer rides up with the keypad whatever settings are used for position. The solution seems to be to use bottom = 0 at design time and then top = form height - footer height at run time.

4

I am using the header control extensively and cannot change any of the properties (backgroundcolor, borderstyle, etc.) not to mention the top property which all worked in version 6 of NSB but not now in 7. I would rather not delete and replace all of the header controls if possible. Any chance of getting the properties to work again?

Thanks, John

1 Like
5

Try using a Container instead. You have more control over the properties.

The idea of the Header is that it acts like one: it lives at the top of the form. It was confusing people by not acting that way.

BackgroundColor works fine on the Header control - what are you seeing?

6

The container control is not good for this purpose, the label control is much better for my needs. But that is not the issue: try setting the background color of the header ( say to red) in it’s properties. Didn’t work for me nor at run time either. Works in 6x not in 7x.

Thanks, John

7

Ok, so I tried the nsb sample and the background did change ok. So something else is happening with a project started in 6 and ported to 7. I’ll do some more testing and let you know what I find.

Thanks, John

8

You can also manually position a Header by putting a value in its style property:

top:100px;
9

Using top:100px; worked ok and the reason the background color was not showing was because there was no textContent value. When I added &nbsp it forced the height and the color appeared.

Thanks, John