CODEWITHSUNDEEP
cssrshiny
Giovanni Colitti
Giovanni Colitti

Reputation: 2344

Scrollbars in Shiny app when using navbarPage and reducing window height

I want to avoid scrollbars in the main body of the app irrespective of window height. To accomplish this, I use the vh CSS units to set the height dynamically according to the viewport height.

This is not a problem when using fluidPage() (without a navigation bar):


library(shiny)

ui <- fluidPage(
  
  title = "fluidPage",
  
  tabPanel(
    
    title = "Tab",
    plotOutput("plot", height = "100vh"),
  )
  
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    plot(iris$Sepal.Length, iris$Sepal.Width)
  })
  
}

shinyApp(ui, server)

However, when using navbarPage() scroll bars may be introduced in the main body of the app depending on the height of the browser window and the height set for the elements in the app.

library(shiny)

ui <- navbarPage(

  title = "NavBarPage",
  
    tabPanel(
    
      title = "Tab",
      plotOutput("plot", height = "90vh"),
  )
  
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    plot(iris$Sepal.Length, iris$Sepal.Width)
  })
  
}

shinyApp(ui, server)

In the above example, the height of the plot is set to 90% of the viewport height. This won't always work in eliminating scroll bars, of course, because the navbar is a fixed height and so if you reduce the window height sufficiently, the navbar may be greater than 10% of the browser window height.

I tried to avoid this by setting the navbar height dynamically:

tags$head(tags$style(".navbar {height: 10vh}")),

Adding the above style does not eliminate the scroll bar as expected. Why is it that I see a scroll bar when the navbar is set to 10% of the viewport height and the plot is set to 90%?

I tried changing the navbar height to something like 8vh, but you still have the same problem as before: Reducing the window height can introduce scroll bars.

Even if the above worked, the navbar would look pretty ugly when the window size is large.

Is there a way to fix the navbar height, but completely eliminate (hide) the navbar when the height becomes greater than 10% of the viewport? To me that might be the cleanest solution if the goal is to avoid scroll bars at all costs.

Upvotes: 0

Views: 632

Answers (1)

bretauv
bretauv

Reputation: 8557

You could hide all scrollbars in the body of the app with the following CSS (found in this W3schools page):

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Note that this will hide the scrollbars but you will still be able to scroll. There is some information about how to remove both the scrollbar and the scroll functionality on the page I linked to.

Full app:

library(shiny)

ui <- navbarPage(
  
  title = "NavBarPage",
  
  tabPanel(
    
    title = "Tab",
    plotOutput("plot", height = "90vh"),
  ),
  header = list(tags$style("
                           
                           /* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}"))
  
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    plot(iris$Sepal.Length, iris$Sepal.Width)
  })
  
}

shinyApp(ui, server)

Upvotes: 1

Related Questions