Repeat head on other forms


#1

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


#2

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


#3

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


#4

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


#5

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


#6

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


#7

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

http://surplusanywhere.com/headerOnEveryPage

headerOnEveryPage.nsx (320.5 KB)


#8

Thanks for posting this!


#9

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


#10

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.