Answers

• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  January 23

  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 Posts: 78Questions: 17Answers: 1

  January 23 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
• allan Posts: 63,552Questions: 1Answers: 10,477 Site admin

  January 23 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
• wblakenc Posts: 78Questions: 17Answers: 1

  January 23

  Perfect! As always, thank you Allan and team!
• sinfuljosh Posts: 28Questions: 0Answers: 5

  May 30 edited May 30

  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 Posts: 63,552Questions: 1Answers: 10,477 Site admin

  May 31

  Nice one - thanks for sharing that with us!

  Allan