How to replace fluidRow with a horizontally scrollable non-wrapping row in tab panel?

Question

The reproducible code below uses a fluidRow() to house several user selections using radio buttons. Works fine in this limited example of only 2 radio button groupings. But I need to fit more radio button groupings into this row, without any wrapping. To do this, I'd like to replace this combination of fluidRow()/column() with a horizontally scrollable, non-wrapping row that is not subject to the limitations of the 12-wide grid system currently used in this code.

Also, all objects viewed in the scrolling row need to be left aligned without "fluid" expansion. Currently, using this fluidRow()/column() combo, if the viewing pane is expanded, the 2 columns housing each radio button grouping also expanded which doesn't look good. They need to remain fixed width and stay to the left.

Is this possible?

I prefer sticking with this sidebar/main panel/tab panel/conditional panel layout as I find it very user friendly for navigating the type of data we work with.

The image at the bottom further explains.

Reproducible code:

library(dplyr)
library(DT)
library(shiny)
library(shinyWidgets)

ui <- 
  fluidPage(
    titlePanel("Summary"),
    sidebarLayout(
      sidebarPanel(
        selectInput("selectData", h5("Select data to view:"),
                    choices = list("Beta"),
                    selected = "Beta"),
      ),
      mainPanel(
        tabsetPanel(
          tabPanel("Private data", value = 1,
             conditionalPanel(condition = "input.selectData == 'Beta'",
                fluidRow(div(style = "margin-top:15px"),               
                         column(width = 6, offset = 0,
                            wellPanel(    
                               radioButtons(inputId = 'group1',
                                            label = NULL,
                                            choiceNames = c('By period','By MOA'), 
                                            choiceValues = c('Period','MOA'),
                                            selected = 'Period',
                                            inline = TRUE
                              ),
                              style = "padding-top: 12px; padding-bottom: 0px;"
                            )
                         ),
                         column(width = 6, offset = 0,
                            wellPanel(    
                               radioButtons(inputId = 'group2',
                                            label = NULL,
                                            choiceNames = c('Exclude CT','Include CT'), 
                                            choiceValues = c('Exclude','Include'),
                                            selected = 'Exclude',
                                            inline = TRUE
                              ),
                              style = "padding-top: 12px; padding-bottom: 0px;"
                            )
                         )
                ),
                DTOutput("plants")
          )
        ), 
        id = "tabselected"  
       ) 
     ) 
   ) 
 ) 

server <- function(input, output, session) {
  output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}

shinyApp(ui, server)

This doesn't sound very user friendly - long horizontal-scrolling until you find what you need. Why don't you e.g. conditionally show the `radioButtons` based on another `selectInput`? — ismirsehregal, Jan 17 '22 at 12:42
ismirsehregal, do you have any alternative suggestions for cleanly showing the user a series of grouped radio buttons, so the user can make selections for how to parse the data? I'm looking at a prior suggestion of yours, https://stackoverflow.com/questions/54807301/box-in-fluidpage-basic-shiny, a collapsible box, which could be a good option. — Curious Jorge - user9788072, Jan 17 '22 at 14:39
Regarding the limitations of the 12-wide grid please see my answer [here](https://stackoverflow.com/questions/64047539/how-can-i-set-decimal-width-for-a-column-in-r-shiny/64048438#64048438) — ismirsehregal, Jan 18 '22 at 12:15

ismirsehregal · Accepted Answer · 2022-01-17T16:07:12.017

How about using a carousel instead e.g. via shinyglide or slickR:

library(dplyr)
library(DT)
library(shiny)
library(shinyWidgets)
library(shinyglide)

ui <- 
  fluidPage(
    titlePanel("Summary"),
    sidebarLayout(
      sidebarPanel(
        selectInput("selectData", h5("Select data to view:"),
                    choices = list("Beta"),
                    selected = "Beta"),
      ),
      mainPanel(
        tabsetPanel(
          tabPanel("Private data", value = 1,
                   conditionalPanel(condition = "input.selectData == 'Beta'",
                                    fluidRow(div(style = "margin-top:15px"),
                                             column(12, glide(
                                               height = "25",
                                               controls_position = "top",
                                               screen(
                                                 p(strong("Group 1")),
                                                 wellPanel(    
                                                   radioButtons(inputId = 'group1',
                                                                label = NULL,
                                                                choiceNames = c('By period','By MOA'), 
                                                                choiceValues = c('Period','MOA'),
                                                                selected = 'Period',
                                                                inline = TRUE
                                                   ),
                                                   style = "padding-top: 12px; padding-bottom: 0px;"
                                                 )
                                               ),
                                               screen(
                                                 p(strong("Group 2")),
                                                 wellPanel(    
                                                   radioButtons(inputId = 'group2',
                                                                label = NULL,
                                                                choiceNames = c('Exclude CT','Include CT'), 
                                                                choiceValues = c('Exclude','Include'),
                                                                selected = 'Exclude',
                                                                inline = TRUE
                                                   ),
                                                   style = "padding-top: 12px; padding-bottom: 0px;"
                                                 )
                                               )
                                             ))
                                    ),
                                    DTOutput("plants")
                   )
          ), 
          id = "tabselected"  
        ) 
      ) 
    ) 
  ) 

server <- function(input, output, session) {
  output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}

shinyApp(ui, server)

That is perfect, what a nice way to package parsing/viewing options for the user. I hope a lot of other people find this solution as useful and eye-opening as I do!! — Curious Jorge - user9788072, Jan 17 '22 at 18:33

How to replace fluidRow with a horizontally scrollable non-wrapping row in tab panel?

1 Answers1