1

I have lots of elements in a Shiny sidebarPanel and I have tried to arrange them in columns using column. The result I get is this (this is a simplified example):

enter image description here If I resize the window then the elements look okay, but I do not want users to have to fiddle about and play with the app to get make the controls visible. There is far too much white space on the right side of the "controls" wasting precious space.

enter image description here

  1. How can I stop this overlapping from happening and so that users do not have to resize the window for the app to look okay?

  2. How can I get rid of the empty unused space to the right of the "controls" in this app?

I have tried playing with the column widths but nothing works. I end up with the same result. I guess I am looking for a way to make the elements in the menu more fixed and not fluid?

Code:

library(shiny)
data(iris)
mychoices <- c("pick me A", 
               "pick me - a very long name here", 
               "no pick me - B", 
               "another one that is long")

ui <- 
  navbarPage(
    tabPanel("Dataset description",
    ),
    tabPanel("Data",
             sidebarLayout(
               sidebarPanel(
                 fluidRow(
                   column(3,
                          p(strong("Classes")),
                          actionButton(inputId = "selectall", label="Select/Deselect all",
                                       style='padding:12px; font-size:80%'),
                          br(), br(),
                          checkboxGroupButtons(
                            inputId = "classes",
                            choices = mychoices,
                            selected = mychoices,
                            direction = "vertical",
                            width = "100%",
                            size = "xs",
                            checkIcon = list(
                              yes = icon("ok", 
                                         lib = "glyphicon"))
                          )
                   ),
                   column(3,
                          br()
                   ),
                   column(3,
                          p(strong("Controls")),
                          br(),
                          p("Transparancy"),
                          sliderInput("trans", NULL,
                                      min = 0,  max = 1, value = .5),
                          actionButton("resetButton", "Zoom/reset plot", 
                                       style='padding:6px; font-size:80%'),
                          br(), br(),
                          actionButton("clear", "Clear selection", 
                                       style='padding:6px; font-size:80%'),
                          br(), br(),
                          actionButton("resetColours", "Reset colours", 
                                       style='padding:6px; font-size:80%'),
                          br())
                 )
               ),
               mainPanel(
                 tabsetPanel(type = "tabs",
                             tabPanel("Scatter", id = "panel1",
                                      plotOutput(outputId = "scatter")),
                             tabPanel("PCA", id = "panel2"))
               )
             ))
  )


server <- function(input, output) {}

shinyApp(ui, server)

Session info:

R version 4.0.0 (2020-04-24)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Catalina 10.15.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/4.0/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats4    parallel  stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] shinyjs_1.1              shinydashboardPlus_0.7.5 shinydashboard_0.7.1     shinyWidgets_0.5.3      
 [5] dendextend_1.13.4        tidyr_1.1.0              patchwork_1.0.1          ggplot2_3.3.1           
 [9] shinyhelper_0.3.2        colorspace_1.4-1         colourpicker_1.0         shinythemes_1.1.2       
[13] DT_0.13                  shiny_1.4.0.2            dplyr_1.0.0              MSnbase_2.14.2          
[17] ProtGenerics_1.20.0      S4Vectors_0.26.1         mzR_2.22.0               Rcpp_1.0.4.6            
[21] Biobase_2.48.0           BiocGenerics_0.34.0
lmsimp
  • 882
  • 7
  • 22
  • I have had a look at this question. 1. To get rid of the white space you could increase the widths of the columns so that they add up to the maximum 12. Otherwise you are left with an empty space on the right. 2. Not sure wether there is a perfect solution to prevent the overlapping. In my opinion the issue is that the labels are much too wide to fit in the sidebar for all window sizes. One option would be to increase the width of the sidebar and decrease the width of the main panel. Try e.g. width = 6 for both. Not perfect, but ... – stefan Sep 10 '20 at 20:17
  • 2/3 of horizontal space is for `mainpanel`, and 1/3 is for `sidebar`. You are trying to display more than you can fit in 33% of space, hence there will be overlap in the sidebar. Perhaps you should try `fluid=FALSE` option in the `sidebarLayout()`. – YBS Sep 10 '20 at 20:18
  • @stefan [this is](https://stackoverflow.com/questions/63837387/shiny-layout-is-it-possible-to-have-a-left-and-ride-sidebarlayout-in-shiny) what I would ideally like to achieve! – lmsimp Sep 10 '20 at 20:42
  • @YBS `fluid = FALSE` does not change anything but you are probably right I'm trying to fit too much in the panel :-( – lmsimp Sep 10 '20 at 20:44

0 Answers0