Broken grid system
In the metronic8 template, the container element with id="kt_app_content_container", which essentially holds all the content, extends too far upwards when the y-gutters are used for the rows.
This means that the "kt_app_content_container element" will lie on top of the breadcrumbs and the bottom because of the negative margin.
You can see it here:
https://preview.keenthemes.com/metronic8/demo1/dashboards/ecommerce.html
and on every other dashboard page except the first.
How is it fixed so that the content is actually contained in the kt_app_content_container and does not overflow (and making the breadcrumbs unclickable)?
I'm not even sure if it is a Bootstrap issue or a KeenThemes issue. Either way the grid system should not make the content overflow the content container!
Replies (5)
@unlimited wordle The issue occurs due to the negative margins applied by Bootstrap's grid system when y-gutters are used, causing the content to overlap the breadcrumbs. To fix this, add a wrapper div around the container or apply padding to the parent element to counteract the negative margins, ensuring the content stays within bounds and doesn't interfere with other elements.
The fnf dynamic soundtrack incorporates an interactive aspect into the music by adjusting to the player's performance. Interactivity and immersion are improved by this feature.
Hi,
Please note that this is how the Bootstrap gutter system works in grids and containers.
You can check the original docs examples here and see that the vertical gutters are off the container.
Regards,
Sean
Hi Sean,
Thank you for your reply.
Okay, so it's a Bootstrap problem. However, the issue remains:
Take the Metronic8 template as an example. It has 18 different Dashboards - and almost all of them has this issue, that the breadcrumbs are unclickable and the bottom of the toolbar buttons are also unclickable, because the content area is overflowing the content container.
It is clearly a mistake. You can check it out for yourself:
https://preview.keenthemes.com/metronic8/demo1/dashboards/ecommerce.html
Just stating that "this is how the Bootstrap gutter system works" does not solve the issue.
I did not expect this template to have bugs like these.
Best regards,
Jonas
Hi,
Sure, we will fix those issues in the next update asap.
In the meantime you can fix it by changing g-xl-10 to gx-xl-10 to not use a vertical gap for the grid.
Regards,
Sean
