Shiny 1.0.5 make sliderInput inline with label

Question

I am trying to make several sliders where the label is on the left slide of the slider rather than on top of it.

I saw these two solutions:

https://github.com/rstudio/shiny/issues/1737

Label next to selectInput in shiny

However they do not seem to work with new shiny template. The labels and slider do indeed become inline, but the size of slider really shrinks.

If I manually set .irs-line width to a specific number of pixels, I do get a proper size slider, but it looks horrible on different screens or if the window is minimized. And if I try making it "auto" or "100%", I am back to a "dot" instead of slider.

Reproducible example:

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    width = 4,
    div(HTML("<b>Bla bla bla bla bla</b>")),
    br(),
    tags$head(
      tags$style(type="text/css", 
                 "label.control-label, .selectize-control.single { 
                 display: table-cell; 
                 text-align: center; 
                 vertical-align: middle; 
                 } 
                 label.control-label {
                 padding-right: 10px;
                 }
                 .form-group { 
                 display: table-row;
                 }
                 .selectize-control.single div.item {
                 padding-right: 15px;
                 }
                 .irs-line{
                 width: 100%;
                 }")
    ),
    sliderInput("lbl1", "label 1", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl2", "label 2", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl3", "label 3", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl4", "long label number 4", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl5", "label 5", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl6", "label 6", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl7", "label 7", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl8", "label 8", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl9", "label 9", min = 0, max = 10, value = 0, step = 1)
  )
)
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Answer 1

I'm not an expert, but I will share what I know:

You can always use relative sizes to configure your widgets on the div. Use for example width:10vw (vw refer to your screen width) and height:10vh (vh refer to your screen height).

I applied this and modified your code a bit, seems to work for me.

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    div(style="width:10vw;",

    width = 4,
    div(HTML("<b>Bla bla bla bla bla</b>")),
    br(),
    tags$head(
      tags$style(type="text/css", 
                 "label.control-label, .selectize-control.single { 

                 text-align: center; 
                 vertical-align: middle; 
                 } 
                 label.control-label {
                 padding-right: 20vw;
                 }
                 .form-group { 
                 display: table-row;
                 }
                 .selectize-control.single div.item {
                 padding-right: 20vw;
                 }
")
    ),
    sliderInput("lbl1", "label 1", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl2", "label 2", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl3", "label 3", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl4", "long label number 4", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl5", "label 5", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl6", "label 6", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl7", "label 7", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl8", "label 8", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl9", "label 9", min = 0, max = 10, value = 0, step = 1)
      )
    ))
  )

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)