Horizontal Multi-Select Checkboxes

  • 1
  • Question
  • Updated 4 years ago
How do I render Multi-Select Checkboxes Horizontally and not vertically like the built in render? If someone has an example how to do this would be awesome.
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
  • Hopeful

Posted 4 years ago

  • 1
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Jarrod,

I would add a CSS resource with this code.  This would cause all multiselect fields rendered as checkboxes on the page to be horizontal.  You can target this more by putting a unique id or css class on the field editor that you're using.

.nx-checkboxwrapper {
    display: inline-block;
    margin: 0 6px 4px 0;
}

.nx-checkboxlabel {
    margin-left: 32px;
    padding: 5px 10px 5px 0;
}
(Edited)
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
THANK YOU! That is exactly what I wanted! I am trying to figure out how to add a CSS class to a Field Editor field and I do not see an option to add a custom class name anywhere or a unique ID.
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
Found it, I applied it to the CSS on the Field update container. Then modified the CSS also and only the Field Update sections I apply that now go horizontal! Perfect...