Flex Grid Overlapping

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
necko77
 
 
Posts: 13
Joined: Wed Sep 10, 2014 11:04 am

Flex Grid Overlapping

Post by necko77 » Mon Nov 30, 2020 12:02 pm

Hello, 8)

I have a little problem and I hope that someone can help me:

I'm building a site and I have inserted 2 flex grids, one above the other, and when I'm scaling my page to see how my breakpoints work, the second flex grid is not aware of the first flex grid changing its size, so its content became overlapped...

Is there a way to do this, please check out the little gif presentation of the problem:
It is not practical to have one big flex grid...I like to cut them into a few smaller grids...

https://photos.app.goo.gl/8kLvMyffFSgLnHDN8

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

Re: Flex Grid Overlapping

Post by Pablo » Mon Nov 30, 2020 12:09 pm

To be able to help you, I need a project file.

Note that I do not need to full website, only a small demo with one page and the elements relevant to your question.

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

necko77
 
 
Posts: 13
Joined: Wed Sep 10, 2014 11:04 am

Re: Flex Grid Overlapping

Post by necko77 » Mon Nov 30, 2020 12:27 pm

The site is small, I just started building it and the link is below:

https://drive.google.com/file/d/1EbzPSi ... sp=sharing

Thx Pablos :)

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

Re: Flex Grid Overlapping

Post by Pablo » Mon Nov 30, 2020 1:45 pm

I'm sorry, but it is not clear to where in your project I need to look.
Can you please remove all content form the project which is not relevant to your question, so it's immediately clear what you are trying to do?

necko77
 
 
Posts: 13
Joined: Wed Sep 10, 2014 11:04 am

Re: Flex Grid Overlapping

Post by necko77 » Mon Nov 30, 2020 1:57 pm

https://drive.google.com/file/d/1rvBeO7 ... sp=sharing

Go to page TC, start preview F5, go to the middle of the page, there are two Flexgids, Flexgrid3 and Flexgrid2(check out Object manager).
When I resize my chrome window those two flex grids are overlapping. As Flexgrid2 is not aware of Flexgrid3.
Thx

I went to eat something in the meantime...

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

Re: Flex Grid Overlapping

Post by Pablo » Mon Nov 30, 2020 2:20 pm

You have set the height of the first flex grid to 'fixed', so the height is always same no matter the content. That is why the second grid overlaps the first one.
I recommend to set the height to 'auto' instead.

necko77
 
 
Posts: 13
Joined: Wed Sep 10, 2014 11:04 am

Re: Flex Grid Overlapping

Post by necko77 » Mon Nov 30, 2020 2:50 pm

Your recommendation accepted and immediately I see no more overlapping

Thank you!

necko77
 
 
Posts: 13
Joined: Wed Sep 10, 2014 11:04 am

Re: Flex Grid Overlapping

Post by necko77 » Tue Dec 08, 2020 2:43 pm

I have continued work on my web site and I have the next problem:

On this link you can find the site:

https://drive.google.com/file/d/1j5E9ng ... sp=sharing

I have master-page and on that page, I have PageHeader with some pics, text, and CSS menu.

If you go to the TC page from the Site Manager, you will see that Flexgrid3 is not aware of PageHeader from master-page.

Because of that, I'm not able to set bookmarks and I don't understand why the offset in my Bookmark is not working?

I have set one bookmark but I can't make it work...It always goes somewhere wrong.
If I change offset in Bookmark - nothing changes.

Thx for any help!

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

Re: Flex Grid Overlapping

Post by Pablo » Tue Dec 08, 2020 3:11 pm

This is the same issue.
The page header is fixed. So, floating content will not be affected by the size of the header.

See also:
https://www.w3schools.com/css/css_positioning.asp

Bookmark offsets only work when you enable Smooth Scrolling because the offset is controlled by JavaScript.

necko77
 
 
Posts: 13
Joined: Wed Sep 10, 2014 11:04 am

Re: Flex Grid Overlapping

Post by necko77 » Wed Dec 09, 2020 11:14 pm

Thank you for your time, Pablo.

Please, can you tell me am I able to use the page header full-screen option but without disappearing?
I want to adjust the page header to move down as user scroll down, to be always visible and on top of everything. So page-header is excellent except I have to insert 24 hours or more in Animation - Delay. Even I have set Animation to (none)...

From Help:
Fullscreen
The header will be hidden by default and become visible when the user moves the mouse over the header. So the header is only visible when needed.
This mode also supports animations to slide or fade the header into view.


Can I change this default function to none?

thank you

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

Re: Flex Grid Overlapping

Post by Pablo » Thu Dec 10, 2020 7:10 am

You can set the page header to 'fixed' to keep it always visible.
In HTML, a 'fixed' element does not affect the position of 'floating' elements (like layout girds).
So, the first floating element will be positioned behind the header.
To prevent this you can (for example) give the first layout grid a margin at the top.

necko77
 
 
Posts: 13
Joined: Wed Sep 10, 2014 11:04 am

Re: Flex Grid Overlapping

Post by necko77 » Thu Dec 10, 2020 10:38 am

Can you tell me is it possible to use a sticky layer in this case?

I have a problem if I put the sticky layer on a master-page then the sticky layer is displayed under the cards...
If I put sticky layer on page then it works ok.

So can a sticky layer be on the top of cards if it is located on master-page?

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

Re: Flex Grid Overlapping

Post by Pablo » Thu Dec 10, 2020 10:56 am

If the sticky layer is behind other content then there is most likely an issue with order of the elements.
To be able to help you, I need to see what you have done.

necko77
 
 
Posts: 13
Joined: Wed Sep 10, 2014 11:04 am

Re: Flex Grid Overlapping

Post by necko77 » Thu Dec 10, 2020 12:02 pm

https://drive.google.com/file/d/15WTLZ2 ... sp=sharing

https://photos.app.goo.gl/G5oK3z4SDLtdeWjg9

Go to Page TC, start preview.

The Brown color layer is located on the master page and I can't put it in front of the cards. It is located above the text but the cards are above...
If I put it on TC page then it goes on the top...

The White is a page header and it is working...(located on master-page)

I understand that the page header is a simplified layer? Is that correct?

All I want is to have a layer with an image and menu to be sticky and on the top of everything and to stay sticky while users navigate through the site...
while flex grids are aware of that layer (page header in my case) if that's possible :)

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

Re: Flex Grid Overlapping

Post by Pablo » Thu Dec 10, 2020 12:53 pm

Because the sticky layer is on the master page it will be behind all other content because a master page is basically a 'background layer' for the content page.

To put the sticky layer in the front:
- right click the sticky layer
- select 'Object HTML'
- select 'Custom Style'
- enter this code:

Code: Select all

z-index: 9999 !important;
I understand that the page header is a simplified layer? Is that correct?
Correct

Post Reply