Checkbox rendering in mobile

  • 2
  • Question
  • Updated 3 years ago
  • Answered
The mobile builder renders checkboxes as on/off switches. Is there an easy way to change that back to the simple square box with label to the right used by the desktop builder?
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb

Posted 4 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Custom Renderer.... Not easy,  but it is what we have right now... 
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
FYI CSS solution below.
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
Rob, yes I realised that a customer renderer would work and I might have to go down that path anyway since I probably want to do some visual rearrangement with multiple aligned columns and reponsive resizing. But since the first version of Skuid Mobile used regular checkboxes (not the flipswitch) and the Standard builder still does it I thought that there might be a simpler CSS way of doing most of the change. Just wanted to check this before I started on the custom renderer.
Photo of Sean

Sean

  • 260 Points 250 badge 2x thumb
Peter I know you were looking for this months back but I only came across the issue myself, here is a CCS solution, no Custom Renderer needed!

/* Remove Switches */input[type=checkbox] {
    width: 20px;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    border: 0 transparent;
    box-shadow: 0 0 0 #F5F5F5 inset;
}
input[type=checkbox]:checked:before {
    content: '';
    margin-left: 0;
}
input[type=checkbox]:before {
    content: '';
    background-image: none;
    display: none;
}