Well Panel Field Width CSS

[Nick S.]

I'm having trouble tracking down the source for a visual issue in my shiny app. As a disclaimer...I know next to nothing about CSS and am still learning. Based on other examples...I have attempted to create a reactive wellPanel containing two side-by-side lists of objects that a user selects to filter the output.

While being rendered on my native laptop display (1366 x 768)...the selectInput() dropdown lists in the wellPanel behave as I intend (the two selectInput lists are located side-by-side and are discrete/do not overlap). I have noted a visual display "bug" where when I display the shiny app on a projector via VGA input from a laptop...the screen resolution changes and sidebarPanel() changes size while the selectInput() fields in the wellPanel remain their original/specified size/width and end up overlapping resulting in obscured selectInput() fields (see example images below).

My question is...how do I make the size of the selectInput() fields dynamic so they scale proportionally regardless of the display (or is this even possible)?

Example snippets of code that influence the appearance of the wellPanel()

server.R

#defines the two lists used in the wellPanel() 

output$date_list <- renderUI({

selectInput("date_list","Syn Date:",choices=filtered_all()$syndate)

})

output$plate_select <- renderUI({

selectInput("plate_select","Syn Plate:",choices=plate_list())

 })

ui.R

widget_style <- "display: inline-block;

                  vertical-align: text-top;

                  padding: 7px;

                  border: solid;

                  border-width: 1px;

                  border-radius: 4px;

                  border-color: #CCC;"

conditionalPanel(

                  condition = "input.conditioned_panels == 2",

                  wellPanel(

                        h5("Single Plate Spatial Analysis:"),

                        div(class="row-fluid", 

                            div(style = widget_style, uiOutput("date_list")), 

                            div(style=widget_style, uiOutput("plate_select"))),

                        tags$style(type="text/css", '#date_list {width: 125px}'),

                        tags$style(type="text/css", '#plate_select {width: 150px}'),

                        helpText("Select synthesis date & plate barcode.")

                   ))

What I have tried so far:

• By trial and error...I have determined that I can change the "px" argument in the  '#date_list {width: 125px}' or  '#plate_select {width: 150px}' fields to a lower specified value but it does not solve the root problem of makig the field dynamic.
• If I remove the two tag$style arguments altogether...the two selectInput() fields stack on top of each other which is also undesired behavior.
  

Any advice/help is greatly appreciated!

VGA Display

Native Laptop Display

[Kirill Savin]

It is hard to help you without having access to a page. Have you tried using "%" (percent of a parent frame width) instead of "px"? It is also may be due to font size, you can use "em" if you want your interface to scale with the font. Or you could try to set a fixed font size. Check out CSS unit reference

[Kirill Savin]

You may also make your sidebar panel fixed-width. See discussion

On Tuesday, October 1, 2013 7:02:20 PM UTC-4, Nick S. wrote:

[Nick S.]

Thanks for the feedback everyone.

I did find that the % argument achieved the effect I was looking for.