Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


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.



I've searched the web and found that there is an issue with the metronic8 template where the container fnf element with extends too far upwards when the y-gutters are used for the rows. This can cause the content to overflow and make the breadcrumbs unclickable.



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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(