CODEWITHSUNDEEP
htmlcssrshinybslib
fromtheloam
fromtheloam

Reputation: 455

R Shiny 1.6 with {bslib} Package: Navbar Styling on Mobile - Bootstrap 4 vs. Bootstrap 3

I recently updated to Shiny version 1.6 to use the newly incorporated bslib package's Bootstrap 4 styling. However, 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 for styling with Bootsrap 3:

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)

Here is what the mobile layout for this looks like (the title or navbar-brand is stuck to the left-hand side, and the hamburger button is stuck to the right-hand side):

bslib::theme(version = 3)

Now, if you update the theme = bs_theme() function with version = 4 instead of version = 3 you get the following mobile layout (hamburger button stuck to the left-hand side and the title/navbar-brand stuck next to the hamburger button):

bslib::theme(version = 4)

I have tried to use CSS to change the way this is oriented, but I can't seem to figure out how to override the default CSS that Shiny is using. I have also tried to modify the HTML to see if I can get these to flip around and look like the version = 3 styling (which appears to be the default Bootstrap 4 styling from what I can tell per https://bootswatch.com/yeti/), but I haven't had any luck. Does anyone have any suggestions for how I can achieve the orientation of the version = 3 setting?

Upvotes: 1

Views: 1061

Answers (2)

fromtheloam
fromtheloam

Reputation: 455

To follow up, I opened an issue with the package maintainer here - this does appear to be a bug. Anyway, after looking at the commit that was made, I was able to add the following CSS to my stylesheet to fix this issue:

@media (max-width: 576px) {  
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
      float: right !important;
  }
}

I assume this will be fixed with a future update to the bslib package.

Upvotes: 2

john
john

Reputation: 1036

Seems to be a bug. Raise issue in package repository in github. You can override default css with !important

Upvotes: 1

Related Questions