Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change size of actionButton and its label

Tags:

html

css

r

shiny

How can I make an actionButton and its label smaller, but still centered in the button icon? I have been able to accomplish making both the button and the text smaller, but the result is a small button with small text that isn't centered in the button. I think I'm probably approaching this incorrectly. Here is an example where the button/text gets smaller but the result is a button with the text not centered.

library(shiny)

shinyApp(
    shinyUI(fluidPage(
        inputPanel(
            ## Original
            actionButton('button', 'Hi'),

            ## Text is smaller
            gsub('Hi', '<font size="1">Hi</font>',
                 actionButton('button1', 'Hi')),

            ## Text is smaller and button is smaller, but text is outside of button
            gsub('Hi', '<font size="1" align="center">Hi</font>',
                 actionButton('button2', 'Hi', style='height:20px'))
            )
    )),
    shinyServer(function(input,output){})
)
like image 311
Rorschach Avatar asked Oct 12 '15 22:10

Rorschach


1 Answers

You should really just focus on the HTML and CSS here. There's nothing that's really R and shiny specific here. An actionButton is just an HTML <button>. You can set properties for font-size and padding (the space around the text).

Here's one way to reduce the padding and decrease the font-size

actionButton('button2', 'Hi', style='padding:4px; font-size:80%'))
like image 97
MrFlick Avatar answered Oct 06 '22 10:10

MrFlick