Bootstrap 5.x inline checkboxes

wblakenc

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?

allan

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

wblakenc

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

allan

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

wblakenc

Perfect! As always, thank you Allan and team!

sinfuljosh

Running into this also except I only want inline on certain fields.
Looking at the html structure it looks like we just need to add the class 'form-check form-check-inline' to the immediate parent of the input.

Took some trial and error but because I suck at javascript (was trying to use parentNode with no success).

$( 'input', editor.field( 'color' ).node() ).parent().addClass( 'form-check form-check-inline' );

Or if we are using the input() method as Allan recommends:

editor.field( 'color' ).input().parent().addClass( 'form-check form-check-inline' );

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

I did however add a bit of css to fix the vertical alignment but resetting a couple of properties on the label.

div.DTE_Field_Type_checkbox div.form-check-inline label {
    margin-left: inherit;
    vertical-align: inherit;
}

allan

Nice one - thanks for sharing that with us!

Allan