rstudio / bslib

Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5.
https://rstudio.github.io/bslib/
Other
466 stars 57 forks source link

navbarPage Styling on Mobile - Bootstrap 4 vs. Bootstrap 3 #289

Closed evolvingwild closed 3 years ago

evolvingwild commented 3 years ago

I am having trouble styling a navbarPage for mobile when moving from version 3 to version 4 (using the bslib::theme() method within a navbarPage). Here is a sample app:

library(bslib)
library(shiny)

ui <- function(request) { 

  bootstrapPage(
    navbarPage(
      id = "dir",
      theme = bs_theme(
        version = 3,
        bootswatch = "yeti"
        ),
      title = "Mobile Testing", 
      windowTitle = "Mobile Testing", 
      collapsible = TRUE,

      ## First navbarMenu
      navbarMenu(
        title = "Menu #1", 
        tabPanel(title = "Tab 1", "Tab 1"), 
        tabPanel(title = "Tab 2", "Tab 2"), 
        tabPanel(title = "Tab 3", "Tab 3")
        ), 
      ## Second navbarMenu
      navbarMenu(
        title = "Menu #2", 
        tabPanel(title = "Tab 1", "Tab 1"), 
        tabPanel(title = "Tab 2", "Tab 2"), 
        tabPanel(title = "Tab 3", "Tab 3")
        ), 
      tabPanel(title = "Tab #1")
      )
    )

  }

server <- shinyServer(function(input, output, session) { 
  ## empty server
  })

shinyApp(ui, server)

When version = 3 is set in the bs_theme function, the mobile display looks like this:

Screen Shot 2021-03-19 at 12 05 47 AM

However, when this is updated to version = 4 the mobile display looks like this:

Screen Shot 2021-03-19 at 12 06 04 AM

It appears that the HTML does not change between using version = 3 and version = 4, and I am having a hard time figuring out how to override this with css styling. I am also unsure exactly how the bslib css is working to produce this type of output (as this does not appear to be the default mobile behavior for Boostrap 4 per https://bootswatch.com/yeti/).

Thanks!

evolvingwild commented 3 years ago

Here is my R info:

platform       x86_64-apple-darwin17.0     
arch           x86_64                      
os             darwin17.0                  
system         x86_64, darwin17.0          
status                                     
major          4                           
minor          0.3                         
year           2020                        
month          10                          
day            10                          
svn rev        79318                       
language       R                           
version.string R version 4.0.3 (2020-10-10)
nickname       Bunny-Wunnies Freak Out 

Shiny is version 1.6.0 and bslib is version 0.2.4.

I am running this on macOS Big Sur 11.2 in Google Chrome Version 89.0.4389.90 (Official Build) (x86_64)

github-actions[bot] commented 1 year ago

This issue has been automatically locked. If you believe you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.