scaling a Shiny App for different screens sizes

[Joe Hightower]

I need to be able to scale an app so that it displays correctly on different screen sizes.  I developed the layout on a 24" monitor.  Everything looks good.  On 19" monitor though, the three columns of tables do not scale but overlap and become unreadable.

 

I loaded the app on a local Shiny server, then tested it through Firefox.  The app does not scale correctly on any screen (24" or 19")

 

Any helpful ideas would be appreciated.

 

[Natalia Arteaga]

Hi

i used for width percents

for the width i used percents, so when i use differents screen resolution, the widgets fit

so:

plotOutput("n",width=100%) 

or

tableOutput("n"),tags$head(tags$style(type="text/css","#n {width:100%}")

besides in UI page for example fluidpage,bootstrappage the parameter resposive=T, look! 

"responsive TRUE to use responsive layout (automatically adapt and resize page elements based on the size of the viewing device)"

i hope you serve

Natalia

[Joe Hightower]

I have used the  second approach with tags$head, and the third approach, specifically calling out the responsive=TRUE option on the fluidPage line.  Neither works.

 

My Code:

 

        tabPanel("Cost",
                 fluidPage(responsive=TRUE,
                   fluidRow(h3(style="text-align:center","Data Input")),
                   fluidRow(
                   column(6,
                          numericInput("cpch1", label = h4("Cost To Consumer per Nonconforming Characteristic"), value = 0)
                          ),
                   column(6,
                          numericInput("cpch2", label = h4("Cost To Manufacturer per Nonconforming Characteristic"), value = 0)
                          )
                   ),
                   fluidRow(
                   column(6,
                          numericInput("chpu", label = h4("Characteristics Per Unit"), value = 0)
                          ),
                   column(6,
                          numericInput("upm", label = h4("Units Per Month"), value = 0)
                          )
                    ),
                   fluidRow(h3(style="text-align:center","Cost Tables")),
                   fluidRow(
                    column(4,h4(style="text-align:center","Minimum Values"),
                          tableOutput("cost_table1"),
                          tags$head(tags$style(type="text/css",
                                               "#cost_table1{width:100%}",
                                               "#cost_table1 table th td {
                                                          border: 8px double black !important;
                                                        }
                                                #cost_table1 table th    {
                                                          background-color:blue;
                                                          color:white;
                                                        }
                                                #cost_table1 table td    {
                                                          text-align:center;
                                                          font-weight:bold;
                                                          font-size:large;
                                                          font-family:arial
                                                        }"))
                                ),
                  column(4,h4(style="text-align:center","Nominal Values"),
                        tableOutput("cost_table2"),
                        tags$head(tags$style(type="text/css",
                                             "#cost_table2{width:100%}",
                                             "#cost_table2 table th td {
                                                          border: 8px double black !important;
                                                        }
                                              #cost_table2 table th    {
                                                          background-color:blue;
                                                          color:white;
                                                        }
                                              #cost_table2 table td    {
                                                          text-align:center;
                                                          font-weight:bold;
                                                          font-size:large;
                                                          font-family:arial
                                                        }"))
                   ),
                   column(4,h4(style="text-align:center","Maximum Values"),
                   tableOutput("cost_table3"),
                   tags$head(tags$style(type="text/css",
                                        "#cost_table3{width:100%}",
                                        "#cost_table3 table th td {
                                                          border: 8px double black !important;
                                                        }
                                         #cost_table3 table th    {
                                                          background-color:blue;
                                                          color:white;
                                                        }
                                         #cost_table3 table td    {
                                                          text-align:center;
                                                          font-weight:bold;
                                                          font-size:large;
                                                          font-family:arial
                                                        }"))
                 ) 
                 ),

A picture of the results is attached.