In R, adding multiple RShiny actionButton (or selectInput) widgets to one row

Question

I am building an RShiny app, and have run into an issue that it feels like there should be an answer for. Here's a version of my shiny app's current ui code, along with a screenshot for its output.

ui = fluidPage(theme = shinytheme('simplex'),
               fluidRow(
                 column(width = 12, align = 'left',
                        h2('NBA Shot Chart and Movement Tracking Application'),
                        h5('Using the interface below, you can create beautiful shot charts and movement tracking visualizations
                           of NBA players, for specific games or across entire NBA seasons'),
                        br()
                 )
               ),
               ####################################################################################
               fluidRow(
                 column(width = 4, align = 'center',
                        h3('Shot Chart Parameters'),
                        hr())
               ),

               fluidRow(
                 column(width = 2, align = 'center',

                        # Input for player to look up. 
                        selectInput(inputId = 'shooter.input', label = 'Select Shooter:', multiple = FALSE, choices = shooter.selection,
                                    width = '100%', selected = 'Stephen Curry'),

                        # Input for season. 
                        selectInput(inputId = 'season.input', label = 'Select Season:', multiple = FALSE, choices = season.selection,
                                    width = '100%', selected = '2015')),
                 column(width = 2, align = 'center', 

                        # Input for opponent to look up. 
                        selectInput(inputId = 'opponent.input', label = 'Select Opponent:', multiple = FALSE, choices = team.selection,
                                    width = '100%', selected = 'ALL'),

                        # Input for other shot chart filters.  
                        selectInput(inputId = 'filter.input', label = 'Select Filter:', multiple = FALSE, choices = filter.selection,
                                    width = '100%', selected = 'ALL')
                        )
               ),

               fluidRow(
                 # action button to update graphics
                 column(width = 1.33, align = 'center',
                        actionButton(inputId = 'update.chart', label = 'Reset Shot Chart')),
                 # action button to toggle to shot charts
                 column(width = 1.33, align = 'center',
                        actionButton(inputId = 'toggle.shotchart', label = 'Launch Shot Chart')),
                 # action button to toggle to movement tracking charts
                 column(width = 1.33, align = 'center',
                        actionButton(inputId = 'toggle.movement', label = 'Launch Motion Tracking'))
               ),

               fluidRow(
                 column(width = 4, align = 'center',
                        # moving the table into this panel here now
                        h3('Complete Shooter Profile'),
                        hr(),
                        h4('Shooting by Location'),
                        dataTableOutput('shot.table')
                 )
               )
)

and below is a screenshot of the output:

However, the way my current ui code is structured is causing problems with the rest of my application. First, it is EXTREMELY frustrating that within one fluid row, I need to create 2 columns, each of width 2, in order to display the 4 selectInput's in a 2x2 grid. Second, using 3 columns each of width 1.33 for the 3 actionButtons did not work. Third, and probably most importantly, creating a large number of fluidRows (as opposed to 1 fluidRow, where I am able to wrap the buttons (which is what I want!)) doesn't allow me to add my plots on the right hand side of the shiny app, without messing up the formatting on the left hand side.

Has anybody run into this issue before, and is familiar with a better solution that my current approach?

Thanks!

EDIT - maybe this is easier done if i use sidebarpanel instead of fluidrows?

Possible duplicate of [shiny 4 small textInput boxes side-by-side](http://stackoverflow.com/questions/20637248/shiny-4-small-textinput-boxes-side-by-side) — Pork Chop, Mar 14 '17 at 08:36

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

I may have found a solution to my own question using splitLayout() function, from this post - shiny 4 small textInput boxes side-by-side.

YES!, this gets the job done.

edited May 23 '17 at 12:00

Community

1
1

answered Mar 14 '17 at 05:49

Canovice

9,012
22
93
211

1

I use this enough that I made a simple function to implement it: `inlineElement <- function(..., style = ""){ shiny::div(style = sprintf("display:inline-block; %s", style), ...) }`. I took the solution from the post you link to. – Benjamin Mar 14 '17 at 11:51

In R, adding multiple RShiny actionButton (or selectInput) widgets to one row

1 Answers1

Linked