LayoutGrid with min-height: 0px

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
martin.mattel
 
 
Posts: 97
Joined: Thu Oct 04, 2018 3:04 pm

LayoutGrid with min-height: 0px

Post by martin.mattel » Thu Jan 23, 2020 9:53 pm

Hello @Pablo,

I am successfully working with LayoutGrids but I have a issue you may have an idea for.

This would not have come up if that LG in question would have not been on the very top.
This LayoutGrid has only one column, is set to transparent and has as only item a bookmark.
You can have an empty LG, it has the same issue.
Because the LG below has colors, I identified I have a 1px empty line on top of my browser.
Removing the top LG, the colored LG is now right from the top and there is no 1px color gap.
I did a site inspection and found, that the top LG in question has in css a min-height: 1px statement which when I uncheck makes the second LG starting correctly from the top.
To check, I added a custom html/style with min-height: 10px which moved my colored bar 11px down. 10+1, two min-height. Tested with site inspection (FF, Opera). It also makes no difference if used in an master frame or in a page.
For me it seems that there is an internal min-height set to 1px which cant be changed from the user side.

Is there a way to set the min-height to real 0px ?
(If not, this would be a urgent feature request...)

css example

Code: Select all

#mfLayoutGrid2 > .col-1 {
   box-sizing: border-box;
   font-size: 0px;
   min-height: 1px;                   <-- issue
   padding-left: 0px;
   padding-right: 0px;
   position: relative;
}

User avatar
Pablo
 
Posts: 18976
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: LayoutGrid with min-height: 0px

Post by Pablo » Thu Jan 23, 2020 10:10 pm

The min-height is necessary to prevent the columns from collapsing when empty

Related info:
https://github.com/twbs/bootstrap/issues/13640

User avatar
crispy68
 
 
Posts: 710
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: LayoutGrid with min-height: 0px

Post by crispy68 » Fri Jan 24, 2020 12:22 am

@martin,

What is the purpose of the bookmark in the layout grid exactly? What does it do?

martin.mattel
 
 
Posts: 97
Joined: Thu Oct 04, 2018 3:04 pm

Re: LayoutGrid with min-height: 0px

Post by martin.mattel » Fri Jan 24, 2020 10:03 am

@Pablo, @crispy68,

having a collapsing LG is exactly what I want !

I have LG in my masterframe. The current top LG makes that it always stays on top of the page showing basic information like logo, nav ect. One of my pages using the MF, has text where I use bookmarks to easily jump. Because the text is longer, I want to give the reader a possibility to easily jump to the top with a sticky arrow on the bottom. Jumping forth and back does the job quite well.
The challenge I am facing is, that in the top LG in my MF, embedded elements are vertically centered. When I add a bookmark (which works) into that MF, I do not jump to the exact top, but a bit below - which looks ugly. I added a "virtual" LG on top of the existing top LG, one column and containing only one embedded element - the top-bookmark. This is working as expected BUT due to the min-height: 1px directive, I have a one px line.

This means, there can be situations where a collapsing LG is wanted as it is not inteded for otical rendering but containing an anchor. Therefore it would be great if there is a setting where I can disable min-height: 1px for exactly that LG (no general setting).

Having that, nothing would change for existing envirmonments, but the designer can decide if that would be necessary.
I would really like to avoid using sed for search/replace after pushing...

User avatar
Pablo
 
Posts: 18976
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: LayoutGrid with min-height: 0px

Post by Pablo » Fri Jan 24, 2020 11:04 am

I'm sorry, there is no option to change this.

User avatar
crispy68
 
 
Posts: 710
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: LayoutGrid with min-height: 0px

Post by crispy68 » Fri Jan 24, 2020 1:07 pm

Why can't you make the 'top LG' that contains your logo, nav, etc. a bookmark. A layout grid can be a bookmark itself. There is no need to add a separate bookmark object within the layout grid. This would alleviate the need for a 'virtual' layout grid above your main header layout grid.

martin.mattel
 
 
Posts: 97
Joined: Thu Oct 04, 2018 3:04 pm

Re: LayoutGrid with min-height: 0px

Post by martin.mattel » Fri Jan 24, 2020 3:13 pm

You can, but it is a matter of naming.
LG should have a proper naming for identification like pagenameLayoutGrid1.
This looks ugly when referencing.
Renaming is a possibility but counteracts the namespace idea.
Naming an anchor inside a LG keeps the benefits from both worlds.
It is also easyer when doing debugging having a proper namespace.

User avatar
crispy68
 
 
Posts: 710
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: LayoutGrid with min-height: 0px

Post by crispy68 » Fri Jan 24, 2020 3:23 pm

I agree a meaningful name for the ID makes sense but I wouldn't use 'pagenameLayoutGrid1' as a name anyway. I name layers, grids, etc. based on what content is in them. For example, if there is a photo gallery in a grid, I may name it 'galleryGrid'.

I would simply use 'header' or 'mainHeader' since this will be your header on every page anyway. To me, this is the simplest solution without extra code of adding a blank layout grid unless i'm missing something here.

I'm not sure what you mean by 'Renaming is a possibility but counteracts the namespace idea".

Post Reply