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 (3)
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
