Home > database >  How to add tabulation to the hidden choices from a ConditionalPanel in Shiny?
How to add tabulation to the hidden choices from a ConditionalPanel in Shiny?

Time:12-15

I am creating an app which has one checkboxInput that if you click on it, you will have anoother options to select. These options are hidden by a conditionalPanel. You will only see them if you click the checkbox.

image 1

However, I was wondering if it is possible to put some tabulation into these options, because I don't want them to have the same level of organisation. For example:

image 2

image 3

Code:

library(shiny)


ui <- fluidPage(
  
  titlePanel("My app"),
  
  sidebarLayout(
    sidebarPanel(
      tabsetPanel(

        tabPanel("Tab1",
                 checkboxInput("option1", "Remove...", value = FALSE),
                 
                 conditionalPanel(
                   condition = "input.option1 == 1",
                   radioButtons(inputId = "type_removal", label=NULL,
                                choices = c("Remove 1" = "remove1",
                                            "Remove 2" = "remove2"))),
                 
                  textInput(inputId = "data2", "Data1", value = "data")),
        
        tabPanel("Tab2",
                textInput(inputId = "data", "Data1", value = "data")
       ),
      
      )
    ),
    
    mainPanel(
     
    )
  )
)


server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Is it possible to do it in Shiny?

Thanks very much in advance

Regards

CodePudding user response:

You can add inline style to the conditional panel:

             conditionalPanel(
               condition = "input.option1 == 1",
               style = "margin-left: 100px;",
               radioButtons(inputId = "type_removal", label=NULL,
                            choices = c("Remove 1" = "remove1",
                                        "Remove 2" = "remove2"))),

CodePudding user response:

Add this css to your shiny app:

.shiny-options-group{
  margin-left: 20px;
}

enter image description here

  • Related