CODEWITHSUNDEEP
cssrshiny
fifthace
fifthace

Reputation: 546

Box and input inline in Shiny, but only for some inputs

I would like some inputs to have their label inline with the input box, and others to exhibit the standard Shiny standard behaviour. Consider the answer (and minimal example) given by SBista here: How to put a box and its label in the same row? (shiny package)

library(shiny)
ui <- fluidPage(

  fluidRow(

    tags$head(
      tags$style(type="text/css", "label{ display: table-cell; text-align: center; vertical-align: middle; } 
            .form-group { display: table-row;}")
    ),

    textInput(inputId = "txtInp", label = "Label:"),
    textInput(inputId = "txtInp2", label = "A_longer_label:"),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

This gives the very neat output like so:

Inline behaviour for all Shiny inputs

Here the input boxes are neatly aligned. If I only want some of the labels to exhibit this behaviour (and others to do the normal Shiny thing), I can create the id "inline" and add it to divs around the labels in question, like so:

library(shiny)
ui <- fluidPage(

  fluidRow(

    tags$head(
      tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                #inline .form-group { display: table-row;}")
    ),

    tags$div(id = "inline", textInput(inputId = "txtInp", label = "Label:")),
    tags$div(id = "inline", textInput(inputId = "txtInp2", label = "Label2_not_inline:")),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

Now the third label behaves as expected, but the first two labels are not neatly aligned. I guess this is because an id can only be used once. How can a class be used to achieve the desired result for multiple inputs?

Some inputs are styled with inline behaviour

Upvotes: 1

Views: 3190

Answers (1)

SBista
SBista

Reputation: 7704

To achieve what you want you could modify the css as follows:

tags$style(type="text/css", ".inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                 .inline .form-group{display: table-row;}")

The code would look something like this:

library(shiny)
ui <- fluidPage(
  fluidRow(
    tags$head(
      tags$style(type="text/css", ".inline label{ display: table-cell; text-align: left; vertical-align: middle; } 
                 .inline .form-group{display: table-row;}")
      ),
    
    tags$div(class = "inline", textInput(inputId = "txtInp", label = "Label:"),
    textInput(inputId = "txtInp2", label = "Label2:")),
    numericInput(inputId = "numInp", label = "Third_label:", value = 0)
  )
)

server <- function(input, output){}
shinyApp(ui, server)

With this code you will get the labels which looks a lot cleaner, something like this:

enter image description here

Hope it helps!

Upvotes: 5

Related Questions