Can't find what's causing this table to force a scroll situation

Hi there everyone!

https://s-esx.com/fivemin/table.html

The table in the body is causing a very tiny scroll situation and I just can’t figure out how to remove it. I’ve been trying forcing columns smaller and I’ve even removed some columns but no matter what I do, the table adjusts to force a scroll bar.

Could someone tell me what I need to modify to get rid of it?

Thanks for your time!

Hi there schwim,

this CSS…

.row {
    margin-right: -15px;
    margin-left: -15px;
}

…appears to be the cause of problem.

coothead

Thank you for the help!

I tried overriding it with:

.utrow {
    margin-right: 0px;
    margin-left: 0px;
}

And then adding that class to all < tr > elements in that table but the issue persists. Am I handling this incorrectly? I’ve updated the link with my current effort.

Hi there schwim,

the offending CSS can be found in this file…

https://s-esx.com/fivemin/template/vendor/bootstrap/css/bootstrap.min.css

Unfortunately, “BootStrap” , in it’s infinite wisdom,
puts it’s code all on one line, so you will have to
find and remove it yourself. :rofl:

coothead

You can kill the margin like this:

.table-responsive .row{margin:0}

The main problem is that you nested .row inside an element that has overflow:auto applied and the negative margins on .row cause the scroll. You could have moved .row outside of the table-responsive div and avoided the problem altogether.

Rows create gutters with the padding on the columns so that the negative margin and padding work together. You really have to follow the framework to the letter otherwise you break the grid.

I’m not a fan of bootstrap as you can tell but if you are going to use it then follow the rules :slight_smile:

Don’t ever touch that file :slight_smile:

1 Like

I would likely use the browsers dev tools to identify the problem CSS. But if I wanted to take a look at the entire CSS file it wouldn’t be the “min” version.

(assuming and having faith they would be in sync) It would be
https://s-esx.com/fivemin/template/vendor/bootstrap/css/bootstrap.css

If you are using a framework like bootstrap then you don’t need to touch the framework files at all (unless you use a special build with reduced code) but even then you would not need to touch that file again.

All custom css should be in its own file and not interfere with any of the bootstrap files at all. You would add custom classes and use those to make your changes. In that way you don’t break the grid as some rules (such as the margins and padding for rows and columns) are integral to the way that the framework works. If you removed the margins from .row then the whole grid is broken.

I dislike frameworks as they are another layer that gets in the way of the css and something else that needs to be learned fully before you can get to work. Its ok for teamwork where all the developers are bootsrap savvy because it has a set of rules to follow but for a one man band it’s just too much overhead.:slight_smile: (however some people love it).

3 Likes

Thank you guys very much for all your help, Paul’s override worked fantastically!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.