skip to Main Content

I’m building a shiny app that allows the user to select a number of options near the top of the page which will then affect the subset of the data that is pulled in and manipulated. Everything works just fine with the calculations. The only problem I’m having is in the display. As there are a number of options, most of which are simple radio buttons with only a few options, I like the idea of keeping the look clean by having one row of options near top of the page using a splitLayout function.

For the radio buttons this looks fine, but I also have a set of two selectizeInput boxes. These are related to each other (one is month and the other is year) so I have them in their own sub-splitLayout function within the parent row. However, when the app runs the boxes themselves are squished together and unreadable, as shown (the red circle is not part of the app):

enter image description here

I’ve tried various methods of adjusting the width of these boxes, but to no avail. The "Selectize Options" column itself has plenty of space, as indicated by the large amount of white space to its right before "Input 3" but I can’t get the actual drop-down boxes themselves to fill that space. If I go to the code and continually increase the cellWidth argument related to that box I can eventually get them to show correctly, but at that point I’ve pushed everything else off of the row. I can’t figure out why they won’t fit with a "reasonable" amount of space allocated to them. Hence the question: how can I force R Shiny to expand these boxes and fill up the space available to them without forcing the other row elements out of the box?

Minimum reproducible example:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title= "Minimum Reproducible Example"),
  
  dashboardSidebar(sidebarMenu(menuItem("Home", tabName = "Home"))),
  
  dashboardBody(
    tabItems(
      tabItem(tabName = "Home",
        h2("Homepage"),
        fluidRow(
          box(title='Options',width=12,
            splitLayout(cellWidths=c('12%','12%','25%','12%','12%','15%','12%'),
              cellArgs = list(tags$head(tags$style(HTML(".shiny-split-layout > div {overflow: visible;}")))),
              column(width=2,radioButtons('input1',label='Input 1',choices = list('A'='A','B'='B'),selected = 'A')),
              column(width=2,radioButtons("input2",label = 'Input 2',choices = list('C'='C','D'='D'),selected = 'C')),
              column(width=2,
                HTML("<b>Selectize Options:</b>"),
                splitLayout(cellWidths=c('50%','50%'),
                  selectizeInput("mth",options=list(maxOptions=12),label = 'Month',selected='01',choices = list('01','02','03','04')),
                  selectizeInput("yr",options=list(maxOptions=5),label = 'Year',selected='2023',choices = list('2019','2022','2023'))
                )
              ),
              column(width=1,radioButtons('input3',label='Input 3',choices = list('E'='E','F'='F'),selected = 'E')),
              column(width=2,radioButtons("input4",label = "Input 4",choices = list('G'='G','H'='H'),selected = 'G')),
              column(width=1,radioButtons("input5",label = "Input 5",choices = list('I'='I','J'='J'),selected = 'I')),
              column(width=1,downloadButton("download", "Download"))
            ),
            fileInput(width='100%','uploadfile',buttonLabel='Browse','Upload a File')
          )
        ) 
      )
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

2

Answers


  1. Chosen as BEST ANSWER

    I was able to figure this out with the help of a coworker. My error was in the column width. This fixes it:

    column(width=10,
    HTML("<b>Selectize Options:</b>"),
    splitLayout(cellWidths=c('50%','50%'),
    

    I mistakenly believed that the column width parameter wasn't doing anything because I was setting the column widths in the splitLayout function. However, that appears not to be the case. It looks like this parameter is setting the width of this column relative to the space allocated by splitLayout. I wasn't using enough of the available space. Simply changing that parameter to a larger value fixed my issue.


  2. The issue is using splitLayout and column. You should use one or the other:

    library(shiny)
    library(shinydashboard)
    
    ui <- dashboardPage(
      dashboardHeader(title= "Minimum Reproducible Example"),
      dashboardSidebar(sidebarMenu(menuItem("Home", tabName = "Home"))),
      dashboardBody(
        tabItems(
          tabItem(tabName = "Home",
                  h2("Homepage"),
                  fluidRow(
                    box(title='Options',width=12,
                        splitLayout(cellWidths=c('10%','10%','30%','10%','10%','10%','10%','10%'),
                                    cellArgs = list(tags$head(tags$style(HTML(".shiny-split-layout > div {overflow: visible;}")))),
                                    radioButtons('input1',label='Input 1',choices = list('A'='A','B'='B'),selected = 'A'),
                                    radioButtons("input2",label = 'Input 2',choices = list('C'='C','D'='D'),selected = 'C'),
                                           tags$div(tags$b("Selectize Options:"),
                                           splitLayout(cellWidths=c('50%','50%'),
                                                       selectizeInput("mth",options=list(maxOptions=12),label = 'Month',selected='01',choices = list('01','02','03','04')),
                                                       selectizeInput("yr",options=list(maxOptions=5),label = 'Year',selected='2023',choices = list('2019','2022','2023'))
                                           ), style = "margin-right:30%;")
                                    ,
                                    radioButtons('input3',label='Input 3',choices = list('E'='E','F'='F'),selected = 'E'),
                                    radioButtons("input4",label = "Input 4",choices = list('G'='G','H'='H'),selected = 'G'),
                                    radioButtons("input5",label = "Input 5",choices = list('I'='I','J'='J'),selected = 'I'),
                                    downloadButton("download", "Download", style = "margin-top: 20px;")
                                    
                        ),
                        fileInput(width='100%','uploadfile',buttonLabel='Browse','Upload a File')
                    )
                  ) 
          )
        )
      )
    )
    
    server <- function(input, output, session) {}
    
    shinyApp(ui, server)
    

    Related links:

    https://shiny.posit.co/r/articles/build/layout-guide/

    https://github.com/rstudio/gridlayout

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search