CODEWITHSUNDEEP
rshiny
milkmotel
milkmotel

Reputation: 412

Change R Shiny widget input text size

So I have numInputs, and I want to change the text size of the number that actually appears inside the text box.

How would I achieve that?

Upvotes: 7

Views: 6270

Answers (3)

theforestecologist
theforestecologist

Reputation: 4957

Just a general note that might be interesting to others visiting this post:

It turns out that the tags$style('#inputId {}') approach does NOT work if your inputId has a . in it.

  • For example: the following does not change the text size of the input text:

    tags$style("#myNumeric.Input {font-size:8px;}"),
numericInput("myNumeric.Input", "Observations:", 10, min = 1, max = 100)

    ...but the following works as expected:

    tags$style("#myNumericInput {font-size:8px;}"),
numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100)
    • Note: _ works ok in an inputId name.

If you insist on keeping a . in your inputId name, try adding the style argument directly to your input function instead:

    numericInput("myNumeric.Input", "Observations:", 10, min = 1, max = 100,
                 style = "font-size:8px;")

Upvotes: 1

milkmotel
milkmotel

Reputation: 412

Thanks, I just put 

input[type="number"] {
  font-size: 18px;
}

into my CSS header style tags and it worked.

Upvotes: 2

Geovany
Geovany

Reputation: 5687

The simplest way, as @warmoverflow says, is using CSS. Below are two examples of adding some CSS to a widget, the first one will be only applied to the element with the specified id and the second will be for all the elements of type number. I'm assuming that it is numericInput instead of numInputs, but it should works with any other input widget.

Option 1. Changes the CSS for a specific element

runApp(list(
  ui = shinyUI(fluidPage(
    tags$style("#myNumericInput {font-size:50px;height:50px;}"),
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100),
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100)
  )),
  server = shinyServer(function(input, output, session) {
  })
))

Option 2. Changes the CSS of all the elements of type number.

runApp(list(
  ui = shinyUI(fluidPage(
    tags$style("[type = 'number'] {font-size:50px;height:50px;}"),
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100),
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100)
  )),
  server = shinyServer(function(input, output, session) {
  })
))

Please note that in addition to changing the font size, I also changed the heigh, this is to make sure that the box will be big enough to show the number with a different size.

Also, you could consider using a separate .css file to put all your custom styles.

Upvotes: 6

Related Questions