DOM elements taking up an entire line (using bootstrap and buttons)

bsuk

I can't seem to get the page length option to neatly sit on the same line as my filter search bar, and buttons..
Which ever order I arrange the DOM elements in, the length option seems to want to take up a whole line..
I'm using the bootstrap CSS, and one line of custom CSS to make the buttons display on the right:

div.dt-buttons {
float: right;
margin-left:10px;
}

How it is:
http://www.benshaw.org.uk/misc/2lines.png

How I'd like it:
http://www.benshaw.org.uk/misc/1line.png

I'm using "dom": 'lBfrtipl', to display the order, but whichever position I put the length chooser in, it takes up a whole line.
I've tried many combinations..

Many thanks in advance for any suggestions.
Apologies I can't post a live example easily (hosting on internal server).

allan

You need to use a more complex dom option particularly if you are using Bootstrap. Have a look at the dom reference - it shows the default Bootstrap value and you should base your modifications off that (i.e. keep the grid that is inserted for Bootstrap).

Allan

bsuk

Many thanks Allan! I wasn't aware of the additional complications Bootstrap was throwing into the DOM mix.

I finally got there, also with the help of this similar thread on here:
https://datatables.net/forums/discussion/30044/how-to-display-length-menu-and-buttons-when-using-editor

The winning combination:
"dom": "<'row'<'col-md-6'l><'col-md-6'Bf>>" +
"<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-12'ip>>",

Whilst also keeping the CSS modification:
div.dt-buttons {
float: right;
margin-left:10px;
}

bsuk

Allan, one last quick question if I may:

When I resize the window to reduce the width, the search bar jumps underneath the buttons like so:

http://www.benshaw.org.uk/misc/3lines.png

Can you think of a way to force the search bar to stay on the same line when the window is resized? Many thanks, no problems if this isn't obvious. :)

It's as though, any 2 DOM items on the top bar are fine, but introduce a third (whether it be buttons, or length filter), then a new line gets generated when the window is reduced in size..

allan

You'd probably need to modify the CSS slightly. If you use the browser's "Inspect" options that should indicate what is causing the line break. I'd need a link tot he page to offer anything else since that would need to be debugged live.

Allan

bsuk

Thanks Allan! I can't see exactly what's going on within the HTML, but I've decided that I'm happy to have the filter at the bottom of the table to avoid these issues.
Sorry I can't post a live sample: I'll work to get a test server up and running in case I need to do this again.