Search code examples
rshinydashboard

Adjust text position in sidebar of shiny dashboard


I have this shiny dashboard and I want to move the text a little bit to the right in order to start from the same position as the radioButtons.

library(shiny)
library(shinydashboard)

# Define UI
ui <- dashboardPage(
  dashboardHeader(title = "My Shiny Dashboard"),
  dashboardSidebar(
    radioButtons("d23", "Display on:",
                 choices = c("2D","3D"),
                 selected = "2D"),
    # Place the uiOutput inside the sidebar
    uiOutput("minmax")
  ),
  dashboardBody()
)

# Define server logic
server <- function(input, output) {
  output$minmax <- renderUI({
    # Use renderText inside uiOutput
    textOutput("minmax_text")
  })
  
  output$minmax_text <- renderText({
    
    paste("Minimum for Selected Topics:", "23",
          "Maximum for Selected Topics:", "34"
    )
  })
}

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

Solution

  • The padding of the radio button group are set via the class shiny-input-container. Hence, one option to align your textOutput with the radio buttons would be to wrap it in a div with the same class:

    server <- function(input, output) {
      output$minmax <- renderUI({
        tags$div(
          class = "shiny-input-container",
          textOutput("minmax_text")  
        )
      })
    
      output$minmax_text <- renderText({
        paste(
          "Minimum for Selected Topics:", "23",
          "Maximum for Selected Topics:", "34"
        )
      })
    }
    

    enter image description here