Header and Footer liquid

Judit shared this question 4 years ago
Answered

Is there a way to have a header and footer liquid with the content of the screen centered in the browser?


I've tried with "on windows resize" and "center content", but it doesn't work.


Thanks!

Comments (5)

photo
1

Hi Judit,


In the screen properties you have the option to "Center Screen's content".


This should center the contents of the page in the browser. Note: This will only be visible during simulation.


If this is not what you are trying to simulate could you find an example or explain in detail what it is you need to simulate?


To get the liquid layout you will have to create an onWindowResize event that resizes the elements of the screen with the proportion you want.


Best,


Marc

photo
1

The problem is "onWindowResize" is not compatible with "Center Screen's content".


I want the content centered and a liquid topbar like getsatisfation, the width of the black header is the same as the browser

photo
1

Judit,


I'm sorry I didn't make it clear enough: this option isn't in any event; it is a property of the screen. You have to check the option in the properties panel when you are editing the screen.


Do you have any trouble resizing the widgets with the "onWindowResize" event?


Best,


Marc

photo
1

I wanted to reply to this message as this seems to be the latest case in what seems to be an issues not fixed for several years. Many have a requirement to allow the centering of content on a screen as well as allowing an element to be 100% width of the window. Justinmind will only allow either centered content or 100% width on an element, but not both.


The screen with the option to center the content enabled will center the content in the preview, however if an onresize event is added (On Window Resize > Resize Rectangle > width Calculated = Window Width Constant) the rectangle will resize but the screen content will align left.


Here are some screens, I can send a sample *.vp file if needed


c3133047f8538bee1587b1e3c31edc15

photo
1

The answer to this was here all along:


http://www.justinmind.com/support/res...