0

I need to change the top and bottom spacing of an awesomeCheckbox() input item in a Shiny project, because I have many of them laid vertically and they have too much whitespace in between.

Using inspect element on my browser I can see that I need to change the element of class "checkboxbs checkbox-bs checkbox-bs-primary" from style="margin-top: 10px; margin-bottom: 10px;" to style="margin-top: 0px; margin-bottom: 0px;"

I've tried changing CSS using the following classes but to no avail:

tags$head(tags$style("
  .checkbox {display: inline-block; margin-top: 0px; margin-bottom: 0px; !important}
  .col-sm-4 {display: inline-block; margin-top: 0px; margin-bottom: 0px; !important}
  .checkboxbs {display: inline-block; margin-top: -20px; margin-bottom: 0px; !important}
  .checkbox-bs.input {margin-top: 0px; margin-bottom: 0px; !important}
  .checkbox-bs {margin-top: 0px; margin-bottom: 0px; top:0px; bottom:0px; !important}
  .checkbox-bs-primary {margin-top: 0px; margin-bottom: 0px; top:0; bottom:0px; !important}
  .checkboxbs.checkbox-bs.checkbox-bs-primary {margin-top: 0px; margin-bottom: 0px;}
  .form-group {margin-top: 0px; margin-bottom: 0px;}
  .shiny-input-container {margin-top: 0px; margin-bottom: 0px; !important}
  .form-group.shiny-input-container {margin-top: 0px; margin-bottom: 0px; !important}
  .shiny-bound-input {margin-top: 0px; margin-bottom: 0px; !important}
  ")),
Bastián Olea Herrera
  • 454
  • 4
  • 14
  • 1
    Are you sure you can put `!important` like you do, at the end of the list of CSS properties? Normally we do `margin-top: 0px !important; margin-bottom: 0px !important;...`, one `!important` for each CSS property, just before the semi-colon. – Stéphane Laurent Feb 15 '20 at 10:10
  • @StéphaneLaurent this was the solution! I placed the !important in the correct classes and it worked right away. If you wish, send this comment as an answer so I can mark it as approved. – Bastián Olea Herrera Feb 16 '20 at 04:16

0 Answers0