Repeat head on other forms

Hi guys,

I’m sure I’ve read about this but can’t find it.

I need to repeat the same header and content on different forms.

Any links please ?

Cheers

Steve Warby

http://blog.nsbasic.com/2015/10/using-one-control-on-multiple-forms/

Thanks I knew I had seen it somewhere.

I have tried it.

www.surplusanywhere.com/surplusAnywhere6RepeatHeader

I added the code

NSBPage.appendChild(Header1);

But it appears in various places on the other pages.

Have I missed something here?

Cheers

Steve Warby

Looking at your project page, I notice the header has

position: relative;
left: auto;
top: auto;

If I changed these to typical header property values, your header was placed normally for all forms:

position: absolute;
left: 0;
top: 0;

Kind regards,
Doug

Hi Doug,

I change the top and left to 0
Added position: absolute; to the style .

It works but sits over the other components.

I set the form to relative so the components move down on different screen sizes.

The image in the header is set to 30% width so shrinks / expands on different screen sizes so I can’t set the top of the other components.

Any ideas ?

Cheers

Steve Warby

Yes, that’s true. My own solution for the app I have which is set up similarly (BS, responsive, etc) is to place a container on each form as the first element (sized like the form), then place all form elements inside that container. Give the container a top property to pull things down from the navbar and everything else sorts themselves out within the container.

Unfortunately, reusing a fixed element across all forms seems to have this kind of side effect if designing responsively.

Kind regards,
Doug

Demo of how to repeat the header on each page.

Using this method you don’t have have different header on each page therefore adding removing or cosmetic changes are a lot quicker.

The left image in the header is set to 30% width so this grows & shrinks the header height on different size screens.
Each page content is in a container and the top of this is set the the height of the header.

You can enhance further by reducing the text size in the header for smaller screens.

I haven’t tried it but maybe do the same for a footer on each screen ( mobile navigation ).

Cheers

Steve Warby

iDampKit

headerOnEveryPage.nsx (320.5 KB)

Thanks for posting this!

Hi Guys,

how do I now make the header fixed on each page ?
ie the content below scrolls and the header stays in site.
Cheers

Steve Warby

Why not make it two forms: one for the header, one for the body. In Form properties, you can set screenMode to ‘Actual size’, so the form does not take over the full screen.