Bootstrap 5.x inline checkboxes

Bootstrap 5.x inline checkboxes

wblakencwblakenc Posts: 77Questions: 17Answers: 1

Link to test case: https://live.datatables.net/kumiwisi/3/edit
Hello all. I have set up a test case above. I am not sure why the edit feature isnt working but if you click New it brings up the editor form successfully. What I would like to do is put my checkboxes inline. Right now they are in the default stacked position. I tried to add:

$( editor.node( 'color' ) ).addClass( 'form-check form-check-inline' );

Which added the class successfully, however the result is not as expected. Notice the difference between 'favorite color' and 'favorite car company'.

Thoughts?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Here is a small update to your example to make it load data: https://live.datatables.net/kumiwisi/4/edit .

    However, I'm not seeing anything about the checkboxes inline. Are you looking for something like this?

    Allan

  • wblakencwblakenc Posts: 77Questions: 17Answers: 1
    edited January 23

    Hey Allan,
    Thanks for tweaking that example. I am going to download a copy as this is very useful for debugging. I work at a government agency behind a firewall so I can't easily share with others. It even comes in handy to debugging my own code.

    As far as the in line check box - something like this: https://getbootstrap.com/docs/5.3/forms/checks-radios/#inline

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    Ah I see - thanks for the clarification. We don't follow the Bootstrap HTML structure used in that example, so that specific class won't work unfortunately. However, a little bit of CSS will emulate it:

    div.DTE_Field_Type_checkbox div.DTE_Field_InputControl > div > div {
      display: inline-block;
      width: fit-content;
      margin-right: 1em;
    }
    
    div.DTE_Field_Type_checkbox div.DTE_Field_InputControl > div > div > input {
      float: none;
      margin-left: 0;
    }
    

    https://live.datatables.net/kumiwisi/6/edit

    Allan

  • wblakencwblakenc Posts: 77Questions: 17Answers: 1

    Perfect! As always, thank you Allan and team!

Sign In or Register to comment.