CODEWITHSUNDEEP
cssrshiny
yeahman269
yeahman269

Reputation: 794

Inline label for shiny `sliderInput()`

I would like to have the sliderInput() label in line with the slide for a specific widget.

Applying approch SO led to this behavior (widgets labels are misplaced on the picture):

enter image description here

The supposed "inline" top slide is colapsed. How can we fixe this please?

library(shiny)
ui <- fluidPage(
  tags$head(
    tags$style(
      type="text/css", 
      "#inline label { 
        display: table-cell; text-align: center; vertical-align: middle; 
      } 
      #inline .form-group { 
        display: table-row;
      }")
  ),
  tags$div(id = "inline", 
           sliderInput(inputId = "slid", label = "label inline desired", min = 0, value = 50, step = 1, max = 100)
  ),
  sliderInput(inputId = "slid2", label = "label on top (default)", min = 0, value = 50, step = 1, max = 100)
)
server <- function(input, output, server) {}
shinyApp(ui, server)

Upvotes: 1

Views: 619

Answers (1)

YBS
YBS

Reputation: 21297

Perhaps, this will meet your needs

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    tags$head(tags$style(HTML("div#inline label { width: 32%; }
                               div#inline input { display: inline-block; width: 68%;}"))),
    tags$head(
      tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; }
                                   #inline .form-group { display: table-row;}")),
    
    div(id="inline",  style="width:35vw;",
        # width = 4,
        div(HTML("<b>Bla bla bla bla bla</b>")),
        br(),
        
        sliderInput("lbl1", "label 1", min = 0, max = 10, value = 1, step = 1),
        sliderInput("lbl2", "my label 2", min = 0, max = 10, value = 2, step = 1),
        sliderInput("lbl3", "long label 3", min = 0, max = 10, value = 3, step = 1),
        sliderInput("lbl4", "very long label 4", min = 0, max = 10, value = 4, step = 1),
        sliderInput("lbl5", "normal label 5", min = 0, max = 10, value = 5, step = 1)
    ),
    sliderInput(inputId = "slid2", label = "label on top (default)", min = 0, value = 50, step = 1, max = 100)
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

output

Upvotes: 3

Related Questions