Question 46050 in CSS Question posted in
Some basic documentation can be found here.

Shiny checkbox misaligned when using custom CSS

I am usng the following CSS recommended in some other post for my Shiny checkboxGroupInput, and it mostly works. Produces a grid of checkboxes that are aligned well on the left. But, then, there is quite a bit of misalignment in other columns of the checkbox grid.

  tags$head(
    tags$style(
      HTML(
        ".checkbox-inline {
                    margin-left: 0px;
                    margin-right: 16px;
          }
         .checkbox-inline+.checkbox-inline {
                    margin-left: 0px;
                    margin-right: 16px;
          }
        "
      )
      )
    ),

See below image output. What can I change to make it display in a proper way? Number of items in the check box group varies, and the width of the item also varies.

enter image description here

UPDATE:

Based on the answer below, I am using the following in the Shiny dashboardBody:

tags$head(
    tags$style(
      HTML(
        ".wrapper-grid{
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-column-gap: 0px;
          grid-row-gap: 0px;
          }
        "
      )
      )
    )

And, I am using the following in the following for the checkboxGroupInput, and yet, my misalignment isn’t going away. What am I doing wrong in wrapping this into Shiny?

tags$div(align = 'left', class = 'wrapper-grid', checkboxGroupInput(
        inputId = 'myID',
        label = 'Select my IDs:',
        choices = unique(rl$ID),
        selected = unique(rl$ID),
        width = '1000px',
        inline = TRUE
        )
Tags:

2

Answers


  1. 0

    You can use flex or grid.
    (check box and label must be in same DIV or something element. and you can control on wrapper element with CSS)

    https://codepen.io/sawacrow/pen/mdGxewL

    grid generator:
    https://cssgrid-generator.netlify.app/

        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    .wrapper-grid{
      display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;

    }
  .wrapper-flex{
    display:flex;
    flex-wrap: wrap;
    
  }
  
  </style>
  <h1>option1</h1>
  <section class="wrapper-grid">
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>

</section>

<h1>option 2</h1>
<section class="wrapper-flex">
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I e</label><br>

  </div>
  <div>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I s boat</label><br>
  </div>
  <div>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
  </div>

</section>
  
</body>
</html>
    Login or Signup to reply.
  2. 0

    So I think the problem is that you are defining the CSS for the container that contains the group of checkboxes not the actual group of checkboxes which is buried in a few intermediate child containers. I’m sure it’s possible to force the children to take inherit from the div you created, but it’s also easy to just directly use the html element for the check box group inside the div. (should be #myID > div:nth-child(2))

    All I did was switch .wrapper-grid with #myID > div:nth-child(2) for the CSS you already provided in your question. For whatever reason, with just that, the first checkbox’s left margin is off, so I also had to adjust the margin for just the first checkbox(#myID > div:nth-child(2) > label:nth-child(1)). Here’s a reproducible example of a shiny that worked for me.

    I only fixed the first set of checkboxes so the second set is still off. To fix everything at once you can use the checkbox class instead (.shiny-options-group).

    library(shiny)
library(shinydashboard)


# simulate labels
rl <- rep(
  paste0("12345",
         c("_abc_","_efghi_"),
         "ABC1234567"),
  times=9) 

# make a very basic user interface
ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  
  dashboardBody(
    
    
    # specify CSS
    tags$head(
      tags$style(
        HTML("



#myID > div:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}



#myID > div:nth-child(2) > label:nth-child(1) {
  margin-left: 10px;
}


        "
        )
      )
    ),
    
    
    tags$div(align = 'left', class = 'wrapper-grid', checkboxGroupInput(
      inputId = 'myID',
      label = 'Select my IDs:',
      choices = rl,
      selected = rl,
      width = '1000px',
      inline = TRUE)
    ),

# Define a second set of check boxes that we Won't fix

    tags$div(align = 'left', class = 'wrapper-grid', checkboxGroupInput(
      inputId = 'myID2',
      label = 'Select my IDs:',
      choices = rl,
      selected = rl,
      width = '1000px',
      inline = TRUE)
  )))

# define an empty server
server <- function(input, output){}

# run the app
shinyApp(ui, server)

    Here’s what it looks like:
    (second row intentionally not fixed)
    first set of check boxes aligned

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search