CODEWITHSUNDEEP
shinyshiny-server
Bogaso
Bogaso

Reputation: 3308

Change CSS properties of Shiny checkbox()

I want to change the font size and few other properties of Shiny's checkboxInput()

I did following

div(
tags$style("
#AAA { 
font-size: 30px !important;
}
"),
checkboxInput("AAA", label = "AAA", value = TRUE, width = '80%')
)

But this is not working out. What is the right way to do this?

Also I want that the Checkbox should be placed just below the label (not on the left side). Is there any way to do these 2 change?

Upvotes: 1

Views: 1145

Answers (2)

José Luiz Ferreira
José Luiz Ferreira

Reputation: 565

gdevaux's answer solves your first question... For the second one, I don't think you can control the position using css, but you can add manually the label with html.

You could do something like:

column(
  width = 1,
  div(
    h3("AAA"),
    checkboxInput("AAA", label = NULL, value = TRUE, width = '100%'),
    style = "font-size: 30px !important; text-align:center;"
  )
)

text-align and putting the div in a bootstrap column make sure that label (the h3 element) and the checkbox are aligned. You may have to remove a bit of margin, so the label and the box are not so far apart. And, of course, you can give a class to your h3 and target the font-size more properly.

Upvotes: 3

gdevaux
gdevaux

Reputation: 2505

div has a style argument

div(
  checkboxInput("AAA", label = "AAA", value = TRUE, width = '80%'),
  style = "font-size: 30px !important;"
)

Upvotes: 3

Related Questions