CODEWITHSUNDEEP
rshiny
Steven Ouellette
Steven Ouellette

Reputation: 121

Is there a way to put labels next to an input box in Shiny?

I would like to have the input box labels next to the input itself, but only certain inputs.

I have found the solution here that changes it for all labels Label next to selectInput but is there a way to make it just for selected inputs? By that I mean some numericInput might be the usual way, others would be designated to be next to the box. In that answer, it was suggested that "If you don't want to mess with shiny's default CSS you can just leave the label empty and create a label next to it instead of forcing the existing label to the side" but I don't know how to interpret that to code since I tried what I thought it said, but the other label text was just above where the label= text would have been, not next to it at all.

I am guessing it would be an inline CSS or something, but I don't really know anything but the most basic CSS.

So in this MRE, how could I have "Left of box" to the left of that input box while the "On top of box" label stays where it is?

Thanks for any help you can give!

library(shiny)

# Define UI for application
ui <- fluidPage(

    # Application title
    titlePanel("Label Next To Box"),

    # Sidebar with a input 
    sidebarLayout(
        sidebarPanel(
            numericInput(inputId = "left_label",label = "Left of box",value = 123),
            numericInput(inputId = "top_label",label = "On top of box",value=321)
        ),

        # Main
        mainPanel(
        )
    )
)

# Define server logic
server <- function(input, output) {


}

# Run the application 
shinyApp(ui = ui, server = server)

Upvotes: 2

Views: 2263

Answers (1)

YBS
YBS

Reputation: 21287

Use class attribute as shown below.

library(shiny)

ui <- fluidPage(

  fluidRow(
    ###  next two tags$head is for sliderInput
    tags$head(tags$style(HTML("div#inlin label { width: 15%; }
                               div#inlin input { display: inline-block; width: 85%;}"))),
    tags$head(
      tags$style(type="text/css", "#inlin label{ display: table-cell; text-align: left; vertical-align: middle; }
                                   #inlin .form-group { display: table-row;}")
    ),

    ### next two lines for class - use class attribute (.inline instead of #inline)
    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="inline1", class="inline", textInput(inputId = "txtInp", label = "Label Left 1:")),
    numericInput(inputId = "numInp1", label = "Label on top1:", value = 0), 
    tags$div(id="inline2", class="inline", numericInput(inputId = "numInp2", label = "Label Left2:", value = 0)),
    textInput(inputId = "txtInp2", label = "Label on top2:"), 

    tags$div(id = "inlin", style="width:55vw;",
             sliderInput(inputId = "slid", label = "label left 3 ", min = 0, value = 50, step = 1, max = 100, width=200)),
    sliderInput(inputId = "slid2", label = "label on top (default)", min = 0, value = 50, step = 1, max = 100)
  )
)

server <- function(input, output){}

shinyApp(ui, server)

Upvotes: 2

Related Questions