JPL JPL - 5 months ago 88
CSS Question

R, Shiny : Inline selectInput

1 ) How can we position a

selectInput
next to an other one? I tried :

# style.css
.general {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: auto;
width : auto ;
white-space: nowrap ;}

# ui.R
...
tags$div(class = "general", selectInput(...), selectInput(...))
...


but it doesn't work.

2) How can we position the label of a
selectInput
next to the
selectInput
itself ? I found this topic Positioning Shiny widgets beside their headers
but this is designed for all the
selectInput
of the app. I did not managed to use the code provided in
tags$style(...)
for only one
selectInput
of my app, not all of them. How can we do that ?

Thanks.

JPL JPL
Answer

I answer myself for question 1), with a simple example :

# style.css
.divleft {
  float : left;
  width : 50%;
}

.clearl {
  clear: left;
}

# ui.R
library(shiny)

shinyUI(fluidPage(
  tagList(
    tags$head(
      tags$link(rel="stylesheet", type="text/css",href="style.css")
    )
  ),
    sidebarLayout(
      sidebarPanel(
        selectInput("s1", "Select 1", 1:10),
        tags$div(
          tags$div(class = "divleft", selectInput("s2", label = "Select 2", 1:5, width = validateCssUnit("70%"))),
          tags$div(class = "divleft", selectInput("s3", label = "Select 3", 1:5, width = validateCssUnit("70%")))
        ),
        tags$div(class = "clearl",
                selectInput("s4", "Select 4", 1:5)
                 )
        , width = 3),
      mainPanel(
        h3("Example")
      )
    )
  )
)

# server.R
shinyServer(function(input, output, session) { })
Comments