Fluidpage layout on narrow screens

[BruceBrad]

I have a shiny app at How rich am I? (a public page, but still in draft). It works fine on wide screens. If I shrink the width the right hand panel stacks underneath the left (as expected). However, the notes in the last fluidrow appear on top of the figure. Is this normal? Any solution?

I'm using a structure like

fluidPage
fluidRow [for the top-page title]
column(8
column(4
fluidRow
column(4 [input boxes]
column(8 [the figure]
fluidRow
column(12 [the notes at bottom]

The plot does have fixed height, because with auto it was not tall enough. Is this the problem?

[scottyd22]

Hi @BruceBrad. Are you able to share the actual code for the app? The example below follows the structure you laid out, and the functionality works as expected. I'm wondering if any special formatting is causing the issue.

library(shiny)
library(tidyverse)

ui <- fluidPage(
  fluidRow(HTML('Title')),
  
  fluidRow(
    column(4,
           textInput('id1', 'Input1'),
           textInput('id2', 'Input2'),
           textInput('id3', 'Input3'),
           textInput('id4', 'Input4'),
           textInput('id5', 'Input5'),
           textInput('id6', 'Input6'),
           textInput('id7', 'Input7'),
           textInput('id8', 'Input8')
           ),
    column(8,
           plotOutput('plot', height = '600px'))
    ),
  
  fluidRow(
    column(12,
           uiOutput('message')
           )
    )
  )

server <- function(input, output, session) {
  
  output$plot = renderPlot({
    ggplot(mtcars, aes(x = cyl)) + geom_histogram()
  })
  
  output$message = renderUI({
    HTML("Notes<br>Here are sample notes<br>This is a placeholder")
  })
}

shinyApp(ui, server)

[ismirsehregal]

A related answer:

Shiny app using fluidrow and columns has overflow issues

[BruceBrad]

Hi scottyd22
I can replicate the problem by modifying your example to have a height statement in the renderPlot statement. That is, renderPlot(height=700,{

The reason I've used a height statement is because I have a column chart with 100 columns, and R wants to make it a wide chart, which leaves lots of white space when it is shown on a normal screen (In general, I want the graph to be roughly square).

[scottyd22]

Hi @BruceBrad. When I add the height argument to renderPlot, I see the same issue. That said, can you just remove it and set height = 700 in plotOutput instead (like I did in the example app)?

[BruceBrad]

That fixed it. Works fine now. Thanks.