How to edit CSS in one column

How to edit CSS in one column

jamiedewitzjamiedewitz Posts: 29Questions: 5Answers: 0

Is there a way I can edit the CSS for my right most column in my datatable? What I would like is for the edit and details button to sit side by side in the Options column, that's it. I have tried adding .btn-grp to the ul since I'm using bootstrap, and it doesn't put the buttons side by side and ALSO brings up the next column from my child table to the main table, which I do not want. I thought that adjusting the Options column would show the buttons side by side, by in the Chrome console, that doesn't do much other than just adjust the width, the buttons still sit on top of each other. I'm using buttons, responsive, and the bootstrap4 datatables css and jquery files, which is a lot of javascript, so it will probably make the fiddle slow, since that is what it does to my application, but that is for another time. If anyone has any ideas that can help me, I'm all ears. Thank you

https://jsfiddle.net/jamiedewitz/oLf4d0ra/5

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    Answer ✓

    Thats an interesting test case :smile:

    You have the buttons in an unordered list ul. You can either create a CSS to have the list display inline or remove the list and just display the buttons. Here is an example showing your original buttons and the two options:
    http://live.datatables.net/nicefawa/1/edit

    Kevin

  • jamiedewitzjamiedewitz Posts: 29Questions: 5Answers: 0

    Hi Kevin, thanks for looking at this again! :) I took the buttons out of the ul and got rid of the styles I had on the td tag, and it brought up the next line from the child table. I also added the side-by-side class to the li and nothing happened.

    After my nightly reboot and coming into work with fresh eyes, I realized that the white-space:nowrap tag I had on my tds wasn't working. I added an important to it, and the buttons spread themselves out! (I currently have nowrap on some of the other columns so the text inside doesn't prevent other important columns from showing up in the main table)

    Thank you!

This discussion has been closed.