Control text size in widgets

4,369 views
Skip to first unread message

charlot...@gmail.com

unread,
May 7, 2015, 12:08:39 PM5/7/15
to shiny-...@googlegroups.com
Hi everyone,

My app contains radioButtons, and these seem small compared to the other text (h3, h2).
I would like to know if it could be possible to increase the text in radioButtons and more generally in widgets.

Thank in advance for your help,

Cheers

cha

Max Moro

unread,
May 8, 2015, 11:55:50 AM5/8/15
to shiny-...@googlegroups.com
You can try to use the h3, h4 commans in the widget text
example:
textInput( "input", label =h3("Input here"))

Max

charlot...@gmail.com

unread,
May 29, 2015, 10:35:47 AM5/29/15
to shiny-...@googlegroups.com
Hi Max,

First thank you very much for your answer (and sorry for the delay of mine)
I tried to inspire me from your advice but it does not work in my case :
Example :
                  radioButtons("treatment", label = "", choices = c(h2("spot"),h2("raster")), selected = h2("spot"), inline = T)

Does anyone have any ideas on how increasing text size in a radiobuttons ?
Thank you very much !!

Cheers                                                 

Joe Cheng

unread,
May 29, 2015, 10:44:09 AM5/29/15
to charlot...@gmail.com, shiny-...@googlegroups.com
If you have some idea of how to use CSS you can use it to customize your app's appearance:
http://shiny.rstudio.com/articles/css.html

I'm not in front of a computer just now so I can't help you with the actual CSS code you'd need, but if you still need help in a couple of hours I'll take a look then.
--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/20a3daab-3f67-4532-bde0-ebb7fa00e6a2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

charlot...@gmail.com

unread,
May 29, 2015, 12:44:15 PM5/29/15
to shiny-...@googlegroups.com
Thank you Joe!

I read the article you sent. I am not familiar with css but this article is clear.
However, I did not manage to use this method on radioButtons...
Could you tell me more about it ?
Thank you in advance.

Cha


Le jeudi 7 mai 2015 18:08:39 UTC+2, charlot...@gmail.com a écrit :

Joe Cheng

unread,
May 29, 2015, 3:39:55 PM5/29/15
to charlot...@gmail.com, shiny-...@googlegroups.com
Here's an example of the actual CSS you'd want:

.radio label {
  font-size: 18px;
}

You could also apply the size change to labels of all types, not just radios:

label {
  font-size: 18px;
}

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.

charlot...@gmail.com

unread,
May 29, 2015, 5:12:45 PM5/29/15
to shiny-...@googlegroups.com
Thanks Joe!

Sorry, I am a beginner in CSS and I don't understand exactly where I need to insert these instructions (www? at the beginning of the ui ?)
Do you have a small example with these lines ?
I look at  http://shiny.rstudio.com/articles/css.html but it did not help me ...
Sorry for the basic questions

Joe Cheng

unread,
Jun 3, 2015, 2:24:15 PM6/3/15
to charlot...@gmail.com, shiny-...@googlegroups.com
Here's an example:

library(shiny)

ui <- fluidPage(
  tags$style(type = "text/css",
    "label { font-size: 20px; }"
  ),
  h1("Heading 1"),
  h2("Heading 2"),
  radioButtons("option", "Choose an option", c(
    "Option 1" = "opt1",
    "Option 2" = "opt2",
    "Option 3" = "opt3"
  ))
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.

charlot...@gmail.com

unread,
Jun 4, 2015, 12:40:16 PM6/4/15
to shiny-...@googlegroups.com
Perfect !! Thank you so much Joe !!!



Le jeudi 7 mai 2015 18:08:39 UTC+2, charlot...@gmail.com a écrit :

charlot...@gmail.com

unread,
Jun 5, 2015, 5:04:00 AM6/5/15
to shiny-...@googlegroups.com
Hi everyone,

I have been thinking about your solution and I was wondering if it would be possible to give some id to one particular radioButtons to specify its text size.
For instance, if I take the example of Joe,

library(shiny)

ui <- fluidPage(
  tags$style(type = "text/css",
             ".radio label {  font-size: 7px;}"

  ),
  h1("Heading 1"),
  h2("Heading 2"),
  radioButtons("option", "Choose an option", c(
    "Option 1" = "opt1",
    "Option 2" = "opt2",
    "Option 3" = "opt3"
  )),
 
  radioButtons("option2", "Choose an second option", c(

    "Option 1" = "opt1",
    "Option 2" = "opt2",
    "Option 3" = "opt3"
  ))
 
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

here, is it possible to set the first radioButtons with a text of 18px and the second one with a text of 7px ?
I have to practice CSS, definitively !!! ;)
Could help me in the meantime,
Again thank you !!

Joe Cheng

unread,
Jun 5, 2015, 2:22:50 PM6/5/15
to charlot...@gmail.com, shiny-...@googlegroups.com
Change this line:

             ".radio label {  font-size: 7px;}"

to this:

             "#option .radio label {  font-size: 7px;}"

to affect only "option", or

             "#option2 .radio label {  font-size: 7px;}"

to only affect option2.

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.

charlot...@gmail.com

unread,
Jun 6, 2015, 7:02:00 AM6/6/15
to shiny-...@googlegroups.com
Once again thank you very much Joe :) !!

Cheers
Reply all
Reply to author
Forward
0 new messages