R Shiny - resize numericInput box

Question

I have a very basic Shiny app.

ui.R:

library(shiny)

shinyUI(fluidPage(
  titlePanel("Average Run Length Simulation"),

  fluidRow(
    tabsetPanel(
      tabPanel("Shewhart v. Shewhart",
        fluidRow(
          column(4,"Rule"),
          column(2,"Group 1"),
          column(2,"Group 2")
          ),
        fluidRow(
          column(4,"1 point more than k sigma away from mean"),
          column(2,
                 checkboxInput("svsg1r1",label=" ",value=F),
                 numericInput("svsg1k1",label=" ",value=3,min=1,step=1)
                 ),
          column(2,
                 checkboxInput("svsg2r1",label=" ",value=F),
                 numericInput("svsg2k1",label=" ",value=3,min=1,step=1)
                 )
          )
        )
      )
    )
))

The server.r file is the basic one created by Rstudio in a new project.

What I really want is a tabular layout of widget elements, but, I don't think I'll get that without a lot of work and this isn't worth it. So, instead, I want to reduce the width of the numericInput() boxes akin the the size attribute of an <input> element in an HTML form.

How would I do this in shiny? Is there a standard way to apply css/html specifics to particular elements?

There is info here that may help: http://stackoverflow.com/questions/20637248/shiny-4-small-textinput-boxes-side-by-side — rysqui, Aug 26 '15 at 20:40

score 2 · Answer 1 · answered Apr 23 '15 at 00:22

2

This works, though it's global css and I'd rather have element specific. I added this inside the fluidPage() element in ui.r and it resized both boxes.

tags$head(
tags$style(HTML("
  input[type=\"number\"] {
    width: 100px;
  }

"))
)

answered Apr 23 '15 at 00:22

Mark

4,387
2
28
48

score 2 · Answer 2 · answered Mar 26 '20 at 14:10

2

For a numericInput box specific resizing, you can use the CSS id selector. In the example above, the following should work to just resize the first box.

tags$head(
tags$style(HTML("
  #svsg1k1 {
    width: 100px;
  }
")))

answered Mar 26 '20 at 14:10

DaveArmstrong

18,377
2
13
25

R Shiny - resize numericInput box

2 Answers2