table layout, search box styling

Zeghra

I made an example here: http://live.datatables.net/bowuhodi/4/edit
My questions:
- I can see the buttons "dom: 'Bfrtip', buttons: [{..." in my app, but I cannot see on live.datatables.
- I wanted to make this change in my app for search input box: https://datatables.net/forums/discussion/69437/change-the-appearance-of-the-default-search-input-box, but in live.datatables the search icon is not visible (in app it is visible).
What is not working in my app:
- the search input box is slightly misspositioned (on left side white background is visible).
- If I make page smaller, after certain page size the table layout changes (I would like to know on what page size it changes position of search box and buttons) : search input box goes beneath the buttons, but search box has a strange layout in this state. Why is that?
- I use a window width of 1500px, the main (gray box) should fit in this width and within main, the table should be stretched in the gray box. If page is set to full size, the gray box (and table) max width should be 1500px and set to middle of page.

kthorngren

You haven't loaded the buttons extension code. You can use the JS BIN Add Library menu option or use the Download Builder.

Looks like you are using Font Awesome but haven't loaded that library.

To have the table resize with the page use style="width:100%" on the table tag as shown in this example.

Please update the test case to replicate the issues you are trying to fix.

Kevin

Zeghra

Thank you for your reply Kevin.
I put the libraries in the live.datatables. Now I can see buttons and fontawesome icons. http://live.datatables.net/bowuhodi/7/edit
I put in live.datatables the style="width:100%;" for the table tag, but it still does not show any change. The table has large margins on sides.
I'm still struggling to find solutions for these:
- the search input box is slightly misspositioned (on left side white background is visible).
- If I make page smaller, after certain page size the table layout changes (I would like to know on what page size it changes position of search box and buttons) : search input box goes beneath the buttons, but search box has a strange layout in this state. Why is that?

Zeghra

@kthorngren I managed to stretch table within gray box (main) http://live.datatables.net/sababino/3/edit
I still see that search input box does not fit well and when window is made smaller, the search input box layout falling apart.

kthorngren

Take a look at the dom docs. It explains how to use the dom option to set the classes, etc to work with various styling frameworks. The Styling section will show the default for BS5. You can start with that and modify as needed to achieve your desred results.

Kevin

Zeghra

My question was about the search box. I wanted to make the same as here: https://datatables.net/forums/discussion/69437/change-the-appearance-of-the-default-search-input-box
It looks almost the same in my example: http://live.datatables.net/sababino/3/edit,
but the datatables_filter is greater than the search input field. It looks that .dataTables_filter input cannot be set (I changed values and nothing happened).
In my css I want to put something like: @media (max-width: 500px) and set the search box and buttons to the left of table. Now if I make page smaller, it places search box and buttons to the middle of table. If I make page even smaller the fontawesome search icon disappears.
I want to set table to be responsive.