Mobile: HeaderContent and Content of Layout are getting overlapped in 11.6.27 version

Hi Folks,
Greetings!

I have one question regarding Layout's Header Content and Content getting overlapped each other like to set or display Layout's Content UI next to Header Content there I have need to provide top margin as per Header Content height, but for different resolution screen Layout's Content UI margin is varying.

Bu this issue was not happened in 11.0.802 version Service studio.

Currently I am using 11.6.27 Version Service Studio.

What I want here is, what would be the height of Layout's Header Content, the Layout's Content UI should be display or start from just next to the end of Header Content UI so that there is no need to pass top margin to Layout's Content UI. 

Kindly let me know if you folks expect more details.


Thanks

Hi Meer,

Could you please elaborate little more?

I din't get your point. why do you need margin top same as header height?

if you want to avoid the header simply user layout blank.


To understand this behavior correctly you should first understand CSS Flex-box because all the layout in OS11 are based on CSS Flex-box.


Regards,

Pankaj

Hi Meer Imtiyaz,

Currently I am using 11.6.27 Version Service Studio but I did not face this issue. I also tried to put too many widget inside Header Content to generate your case.

Are you using the Common\Layout provided by OutSystems. Could you please share the widget tree, you remove or blur the thing which you do not want to show to public.

Thanks.

Pankaj Jain wrote:

Hi Meer Imtiyaz,

Currently I am using 11.6.27 Version Service Studio but I did not face this issue. I also tried to put too many widget inside Header Content to generate your case.

Are you using the Common\Layout provided by OutSystems. Could you please share the widget tree, you remove or blur the thing which you do not want to show to public.

Thanks.

Yes, I am using Common\Layout. In HeaderContent I have added a container with height 22px, top margin 30px.

And in Content span there also taken a container  with some UI design. if I did not provide the top margin to Content span Container then top UI part of Content UI is hiding back to HeaderContent.

If pass top margin to Content container then UI part which was hided that display but for different resolution top margin varying.

But now I have update latest service studio version and created one screen there I did not see this issue. So I will continue by new one. 


Thanks All to your support. 


Solution

Pankaj Jain wrote:

Hi Meer Imtiyaz,

Currently I am using 11.6.27 Version Service Studio but I did not face this issue. I also tried to put too many widget inside Header Content to generate your case.

Are you using the Common\Layout provided by OutSystems. Could you please share the widget tree, you remove or blur the thing which you do not want to show to public.

Thanks.

I have found the issue, actually here I have did some small mistake that is I have taken.header{} CSS in project theme and set "position" property to absolute (I need this for other screen) instead of individual screen theme.

Now issue is resolved. :)

Thanks again for your good support. (Y)


Solution