CODEWITHSUNDEEP
cssrshiny
thothal
thothal

Reputation: 20329

Align radio button options and sliders in shiny app

Problem

I would like to create an UI where there are a couple of sliders, a plot output and radio buttons. With the sliders you can choose values and with the radio button you can choose which slider is relevant for the plot.

Ideally, I would have one radio button in front of each slider (showing no label) instead of having a radio button group. How can I achieve that? Some tweaking in css I suppose? I have done a similar thing with check boxes (not a checkbox group though) and using column. But a radio button would fit better in this case as I want to restrict the user to choose just one element.

Current Status

(Radiobutton 1)
(Radiobutton 2)
[----Slider 1----]
[----Slider 2----]

Ideal situation

(Radiobutton 1) [----Slider 1----]
(Radiobutton 2) [----Slider 2----]

Code

library(shiny)
app <- shinyApp(
   ui = bootstrapPage(
      radioButtons("slds.rb", label = "", choices = paste0("sld", 1:2)),
      sliderInput("sld1", min = 0, max = 10, label = "y1", value = 5),
      sliderInput("sld2", min = 0, max = 10, label = "y2", value = 5),
      plotOutput('plot')
   ),
   server = function(input, output) {
      output$plot <- renderPlot({ 
         plot(seq_len(input[[input$slds.rb]]))
      })
   })
runApp(app)

Upvotes: 1

Views: 1843

Answers (1)

T.Holme
T.Holme

Reputation: 538

You can do this using the div function (which creates the <div> block in HTML) in conjunction with the style display: inline-block;. So your ui becomes:

ui = bootstrapPage(
    div(style="display: inline-block;",radioButtons("slds.rb", label = "", choices = paste0("sld", 1:2),width = '100px')),
    div(style="display: inline-block;",sliderInput("sld1", min = 0, max = 10, label = "y1", value = 5),
                                      sliderInput("sld2", min = 0, max = 10, label = "y2", value = 5)),
    plotOutput('plot')
  )

This applies the CSS display: inline-block; to your div block.

edit: This just get them side by side... to align them to each other will require manually tweaking padding and margin.

Upvotes: 4

Related Questions