Page 1 of 1
layout grid not adapting to the content.
Posted: Mon Feb 26, 2024 8:13 pm
by Kevin
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
Re: layout grid not adapting to the content.
Posted: Mon Feb 26, 2024 8:34 pm
by Pablo
It may be best not to use a div, otherwise the height will be fixed.
Re: layout grid not adapting to the content.
Posted: Mon Feb 26, 2024 8:42 pm
by Kevin
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.
Re: layout grid not adapting to the content.
Posted: Mon Feb 26, 2024 8:52 pm
by crispy68
Do you have an actual link to the page to see it in action?
Re: layout grid not adapting to the content.
Posted: Mon Feb 26, 2024 11:16 pm
by Kevin
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
Re: layout grid not adapting to the content.
Posted: Mon Feb 26, 2024 11:40 pm
by crispy68
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?
Re: layout grid not adapting to the content.
Posted: Tue Feb 27, 2024 12:22 am
by Kevin
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
Re: layout grid not adapting to the content.
Posted: Tue Feb 27, 2024 12:40 am
by BaconFries
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.
Re: layout grid not adapting to the content.
Posted: Tue Feb 27, 2024 1:00 am
by Kevin
you were right. sorry i forgot to select this when uploading. It is up now.
Re: layout grid not adapting to the content.
Posted: Tue Feb 27, 2024 1:17 am
by crispy68
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).
Re: layout grid not adapting to the content.
Posted: Wed Feb 28, 2024 7:33 am
by Kevin
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.
Re: layout grid not adapting to the content.
Posted: Wed Feb 28, 2024 8:22 am
by Pablo
I think there should be an option in html to set height auto
That is why there is a ' 'do not use <div>' option.