How to arrange 'Show Entry' and 'Search' bar?

dataphpmysql

Hello,

Right now the upper side of my table where the 'Show Entry' and 'Search' bar are located, currently looks like this:

show
dropdown
entries

and

Search
. ___________________

Do you know how can I make the words be next to each other? For example,

show dropdown entries

and

Search _____________________________

Haven't been able to figure it out since I cant access the code and fix it myself.

Thanks.

colin

Hi @dataphpmysql,

By default, the "show 'dropdown' entries" are alongside each other, see the example on the home page: https://datatables.net/

If you're not able to access the code, I'm not sure what to suggest to progress this!!!

Cheers,

Colin

dataphpmysql

I wouldn't consider that the default version though cause all I did was download the package and it already came like that.

if anyone has any suggestions it will be greatly appreciated.

colin

Have you include the DataTables stylesheet (https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css )? Otherwise, and if you're defining other things, it may have that effect - see this example: http://live.datatables.net/vamiqora/1/edit.

allan

Just to add to what Colin has said - if that doesn't resolve the issue, we'd need a test case showing the issue to help resolve this. The links Colin has given show that DataTables should work out of the box, but it is of course possible that some external library or CSS is messing things up. This article describes how you can give us a test case showing the issue so we can help you.

Allan

dataphpmysql

@colin

Yes, I've included the DataTables stylesheet (The one we download though, not the cdn one)

The page of the example you gave me is not available: live.datatables.net/vamiqora/1/edit.

However, I don't only use all the files we download, but also Material Design 4 for Bootstrap, which also contains other css files. Maybe that's what's messing it up. Files are downloaded locally though so can't provide example. Was wondering if by experience you could know what code from other files could potentially be messing it up.

dataphpmysql

@allan

Yeah, I believe an external css or library is what's potentially messing it up. I'm using Material Design 4 for Bootstrap, which contains three stylesheets (Font, Bootstrap, and Material Design). It also contains four jquery scripts (jquery, popper, bootstrap, and mdb). So is possible one of these files are messing up the datatables one. Here is a link of the page where I downloaded the MDB files: https://mdbootstrap.com/getting-started/

Can't provide example cause those files mentioned that I downloaded are locally on my PC. Do you happen to know some probabilities of what could be causing the messing up of the format of the DataTables?

Thanks

kthorngren

The example I provided in your other thread exhibits the issue you are talking about:
http://live.datatables.net/zayenije/1/edit

I'm not sure how to fix it but it's something the @allan or @colin can take a look at.

Kevin

dataphpmysql

Thanks @kthorngren for the link.

@allan , here is a link of a test case as an example with the styelsheets and jQuery scripts of Material Design 4 for Bootstrap similar to the ones that I use which could be what's causing the prolem: http://live.datatables.net/zayenije/1/edit

Any suggestions as to what could be making the format of DataTables to change when using the other scripts will be greatly appreciated. Thanks.

colin

It's something to do with the twitter-bootstrap - if that's removed, then the alignment for the show entries is correct, but the search is still lower... One for @allan!

allan

It is indeed being caused by Bootstrap. By default Bootstrap will use display: block on .form-control elements, just like in the example Colin posted above.

You need to load the DataTables / Bootstrap 4 integration CSS and JS to resolve that. With those files it works as expected.

The download builder should be used to ensure that you get all the DataTables files that you need.

Allan

dataphpmysql

Hi @allan , thanks for the help, but unfortunately I'm still having the issue.

The thing is, I'm not using the exact scripts and stylesheets like in the example given. I'm using the Material Design 4 for Bootstrap Pro Version 4.4.5 located here: https://mdbootstrap.com/getting-started/ Adding the DataTables/Bootstrap 4 integration works for the example but not for the pro version files. It definitely looks like there may be some differences which makes the problem persistent. Can't give a test case since those files on the pro version are downloaded and stored locally on the PC and there's no CDN files for the pro version.

Looks like adding extra scripts/styleshtees might not be the option which leads me to believe the only option to fix the issue will be somehow editing the actual code like the display: block on the specific .form-control or something along those lines. Any suggestion on how this can be made? Can we have access to those two specific form-controls like the search and show entries? Cause if I can have access to them then maybe adding an id to the search and show entries and using CSS to change its style and make it non-block could help.

Any suggestion would be helpful, thanks.

allan

This is the (S)CSS that DataTables's Bootstrap 4 integration uses.

You'd basically need to do something like that in your own stylesheet if you can't use the provided stylesheet.

Allan