Layout issue - Bootstrap4

GkHelp

Good afternoon all,

today i implemented the datatables to my bootstrap site and it seems to work nicely,
but the only thing is that the layout is not correct anymore.

In our 'live' environment we have our table that we want to sort/search inside a tab-pane (Div class),
when we apply the datatables in our 'dev' environment this table gets replaced by a wrapper and some more divs.

We have a nice 12 column layout, with columns filled to those specs, col-1, col-4, col-2, col-5.
The last column gets dropped to the next line in our Dev environment.
I know this can happen in bootstrap if you have to much info on your line, or wrong column assignment.

So i went digging a little bit, and it seems that the width's of my column's in dev are bigger then in live (after applying datatables).
Live;
col1 - 92,33 | col4 - 369,33 | col2 - 184,66 | col5 - 461,66
Total: ~1.108

Dev:
col1 - 117,13 | col4 - 394,13 | col2 - 209,45 | col5 - 486,45
Total: ~1.207

running down the code, reducing some padding etc, it still didn't seems to work.

When using the Chrome Inspection tool,
it reveals that the live (col-1) version has a left padding of 4.8, a center of 82.73 and a right padding of 4,8 (totaling 92,33)
on the dev site, col-1 has a left padding of 4.8, a center of 92,33 and a right padding of 20. (totaling 117,13)

As you can see the 'center' part of the column seems to be the same size as the whole column including padding from the live site.

The right padding is a datatables css setting, the rest seems inherited from bootstrap itself.
is there something i'm missing or doing wrong?

Using Bootstrap v4.4.1 (as from css)
Jscript v3.4.1 (locally hosted)
and the JS and CSS (locally hosted) from this url: https://datatables.net/examples/styling/bootstrap4.html

if some things are not clear, just ask me

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

GkHelp

I'm new to jsfiddle and stuff with uploading,
since the framework is entirely self hosted with all the css/js files internal
it took some time to copy the entire page.

I was able to upload all files to a webpage, where everything should work and be visible in the way i see it here.

https://gatesds.nl/jsfiddle/settings.html

Tab 'Klanten' and 'Categorieeën' are tables with the same settings basically, nicely lining up on each row, 12 column bootstrap layout.

Tab 'Licenties' is where i added the DataTables to.
There you can see that the last column jumps to the next line, what is not the case
when we leave out the JS init for that table

See: https://gatesds.nl/jsfiddle/settings2.html

GkHelp

Anyone some idea? (Bump)

allan

Apologies, I lost track of this thread.

It looks like you are applying display: flex to the tr elements in your table which is what is causing the issue. There is also a float-right class on one of the columns which exacerbates the issue. Removing both of those allows it to layout like a table.

Allan

GkHelp

Good day,
the float-right was a remainder of some testing i guess, removed nothing changed that much.
The flex is a whole different part, it is inherited from the Grid bootstrap layout.
When i place an sytle="display:initial" on the TR's or when i remove the class="row"
Then it will change to an display where the lines are on one line, but the layout (column size) is entirely gone.

In the TD's and TH's i use the col-1 / col-4 config from bootstrap, that then again uses flex..

GkHelp

Thnx for taking a look btw.
i know I'm some free support newbie,
just looking for something simple, and this seems to do what i want

GkHelp

Since the edit button disappears after some time, a new post is needed.

I've come to some sort of solution that is not entirely by my taste,
but we've deleted all the classes of Col and Row,
added some white-space: nowrap; to a column to keep some info on the row,
and go with the flow.

As far as i know bootstrap has a lot to do with its grid layout, being all created with display: flex; so seems little bit weird that the bootstrap4 solution you provide doesn't seem to work with flex.
(this can be that my framework is different..)

allan

In your HTML change:

<tr class="row">

to just be:

<tr>

that class is what is causing the display: flex to be applied by Bootstrap.

Allan

Edit: You'll notice that in the Bootstrap docs they don't put that class on the tr element. It isn't required since a tr semantically is a table row. Thus the conflict.