table layout, search box styling
table layout, search box styling
Zeghra
Posts: 20Questions: 4Answers: 0
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.
This question has an accepted answers - jump to answer
Answers
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 thetabletag as shown in this example.Please update the test case to replicate the issues you are trying to fix.
Kevin
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?
@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.
Take a look at the
domdocs. It explains how to use thedomoption 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
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.