Shiny layout, is it possible to have a left and ride sidebarLayout in Shiny?

Question

In Shiny is it possible to have a layout like this?

I would ideally like a left and right sidebar (I have seen some solutions in shinydashboardPlus but this is not exactly what I am after...)

I have an app with a similar structure to this example:

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(2,
                          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(6,
                          br()
                   ),
                   column(4,
                          p(strong("Controls")),
                          p("Transparency"),
                          sliderInput("trans", NULL,
                                      min = 0,  max = 1, value = .5),
                          actionButton("resetButton", "Zoom/reset plot", 
                                       style='padding:6px; font-size:80%'),
                          actionButton("clear", "Clear selection", 
                                       style='padding:6px; font-size:80%'),
                          actionButton("resetColours", "Reset colours", 
                                       style='padding:6px; font-size:80%'),
                   )
                 )
               ),
               mainPanel(
                 tabsetPanel(type = "tabs",
                             tabPanel("Scatter", id = "panel1",
                                      plotOutput(outputId = "scatter")),
                             tabPanel("PCA", id = "panel2"))
               )
             ))
  )


server <- function(input, output) {}

shinyApp(ui, server)

Ideally I would like to split the sidebarLayout so that one column is on the left (classes), and one on the right (controls) as when the app loads the two columns are overlapping like this.

Any suggestions on a better an app design or solutions to this please?

Perhaps have a look at : https://rinterface.com/shiny/shinydashboardPlus/ — Waldi, Sep 10 '20 at 21:27
Thanks @Waldi but already mentioned in my post I have already looked at `shinydashboardPlus` and have actually an [active post](https://stackoverflow.com/questions/63837262/is-it-possible-to-fix-the-left-and-right-sidebars-in-shinydashboardplus-to-perma) seeking how to fix the sidebars to mimic the above. I was hoping there was an easier more elegant solution — lmsimp, Sep 10 '20 at 22:05

score 4 · Accepted Answer · answered Sep 11 '20 at 08:02

Maybe this is what you are looking for. Was just an idea ... so I dropped the sidebarLayout and added a second sidebarPanel. To make sure that both sidebars and the main panel fit in one row I used the width argument.

library(shiny)
library(shinyWidgets)

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",
      sidebarPanel(
        width = 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"
            )
          )
        )
      ),
      mainPanel(
        width = 6,
        tabsetPanel(
          type = "tabs",
          tabPanel("Scatter",
            id = "panel1",
            plotOutput(outputId = "scatter")
          ),
          tabPanel("PCA", id = "panel2")
        )
      ),
      sidebarPanel(
        width = 3,
        p(strong("Controls")),
        p("Transparency"),
        sliderInput("trans", NULL,
          min = 0, max = 1, value = .5
        ),
        actionButton("resetButton", "Zoom/reset plot",
          style = "padding:6px; font-size:80%"
        ),
        actionButton("clear", "Clear selection",
          style = "padding:6px; font-size:80%"
        ),
        actionButton("resetColours", "Reset colours",
          style = "padding:6px; font-size:80%"
        )
      )
    )
  )


server <- function(input, output) {}

shinyApp(ui, server)

This is a great idea! Thanks so much! – lmsimp Sep 11 '20 at 21:08 — lmsimp, Sep 11 '20 at 21:08

Shiny layout, is it possible to have a left and ride sidebarLayout in Shiny?

1 Answers1

Linked