layout grid not adapting to the content.

Kevin · Post by **Kevin** » Mon Feb 26, 2024 8:13 pm

I have the following problem: img -> https://imgur.com/a/UyhKPm6
This image shows the height and width of an ul list (highlighted). this list is generated using php reading a database inside an html (named html4) tag:

Code: Select all

echo '<ul class="collection-list">';
foreach ($result as $row) {
	echo "<li>".$row["Category"]."</li>";
 }
echo "</ul>";

This part structure is the following: img -> https://imgur.com/a/kKG2TrS.
The top layout grid is the base layout, used as a template on all my pages to avoid getting to close to the edges (have 3 columns only use the middle and using the 2 external as a "padding")
The second layout grid is the working grid, divided in two at the moment and using the right part to post the list.

The thing is that i want the height of both layout grids to be adaptable to the content. i do not want to be cut like it is now, the height of the list is "unknown" (i mean it can get longer or smaller.

HTML4 is NOT with overflow: auto, as it only puts scroll adapting to the layout grid.

How can i make the layout adaptable and larger?

Thanks

Post by **Pablo** » Mon Feb 26, 2024 8:34 pm

It may be best not to use a div, otherwise the height will be fixed.

Kevin · Post by **Kevin** » Mon Feb 26, 2024 8:42 pm

Even if i set it to another type, the wb makes divs to keep it all img-> https://imgur.com/a/ioy2FiB. Having the same problem in any type i define.

crispy68 · Post by **crispy68** » Mon Feb 26, 2024 8:52 pm

Do you have an actual link to the page to see it in action?

Kevin · Post by **Kevin** » Mon Feb 26, 2024 11:16 pm

I made a demo project of the error (wbs file). The div has a red border, and the footer is next to it, the ul is bigger than the div so it gets superimposed. https://filebin.net/je4rqhiss2tep63t

crispy68 · Post by **crispy68** » Mon Feb 26, 2024 11:40 pm

Without being able to read the database and populate the page, I'm not sure how your demo is going to help. I did notice you have a <style> tag inserted in the page HTML 'after <body> tag'. This really should be placed between the <head> tags.

Do you have a link to a working demo we can view on the web?

Kevin · Post by **Kevin** » Tue Feb 27, 2024 12:22 am

This is the demo (html mode not php*) it happens the same https://kevin2789.github.io/ and this is what i see : https://imgur.com/a/MxBaVaV

* i mean i erased the loop in php in the error.wbs to just a list in html to be able to put it in github

BaconFries · Post by **BaconFries** » Tue Feb 27, 2024 12:40 am

From looking at both the screenshot and the github link it tells me you haven't uploaded all files this being the css (Error.css) for the layout grid this explains why it looks as it does.

Kevin · Post by **Kevin** » Tue Feb 27, 2024 1:00 am

you were right. sorry i forgot to select this when uploading. It is up now.

crispy68 · Post by **crispy68** » Tue Feb 27, 2024 1:17 am

So, there are a few things that need addressed:

1. The HTML box in the footer has Type = Use <div> to set position and size of the HTML. This needs to be changed to 'do not use <div>'. Using a div will set the width and height of the HTML box to a fixed size. This causes your list to flow beyond the fixed height.

2. You have nested grids. When nesting Grids, you should set the Grid System to be the same. You have the following:

LayoutGrid5 is set to CSS Grid
Footer is set to flexbox
LayoutGrid4 is set to default

Choose 1 and use it for all 3. My preference is flexbox.

Also, you've set the Footer grid position to footer(floating) and this should actually be set to floating. Because the Footer grid is nested inside LayoutGrid5, LayoutGrid5 should be set to footer(floating).

3. And finally, you have set LayoutGrid1 to a fixed height! So any content within this grid including HTML4 is a fixed height (similar to #1) above and your list is flowing outside of the fixed height container (column).

Kevin · Post by **Kevin** » Wed Feb 28, 2024 7:33 am

Thank you, I was busting my brains off in this. I did not realize that the html tag has a fixed height of 100px. I think there should be an option in html to set height auto, similar as you can do with width putting full width.

Post by **Pablo** » Wed Feb 28, 2024 8:22 am

I think there should be an option in html to set height auto

That is why there is a ' 'do not use <div>' option.

www.wysiwygwebbuilder.com

layout grid not adapting to the content.

layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.

Re: layout grid not adapting to the content.