How to line up ui elements using style argument in shiny app that uses bslib 5

Question

I developed a shiny app ui layout that works with bslib 4, but when I switch to bslib 5 my formatting falls apart. I'm not sure why?

Here is my code

library(shiny)
library(bslib)

ui <- navbarPage("My App",
                 id = "navbar",

  theme = bslib::bs_theme(version = 4, #setting bootstrap version
                          bootswatch = "darkly",
                          base_font = "roboto",
                          font_scale = 1.2),

  tabPanel("TAB 1",
           fluidPage(
               fluidRow(selectInput("dataset", label = "Dataset",
                                    choices = ls("package:datasets")),
                        actionButton("enter", label = "confirm choice",
                                     style = "margin-top: 32px; height: 38px; margin-left: 10px;"
                        )
               ),
               verbatimTextOutput("summary"),
               tableOutput("table")
             )
  ),
  tabPanel("TAB 2",
           h3("bla bla"))
)


server <- function(input, output, session) {

}

shinyApp(ui, server)

when using bslib 4 it looks like this

but when I use bslib 5 it looks like this

How can I align buttons in bslib 5? I'd like to use bslib::card() in the results part of the app so I need bslib 5.

score 1 · Answer 1 · answered May 30 '23 at 16:59

1

In your fluidRow, you can add:

style = "display: flex; flex-wrap: nowrap; width: min-content;"

answered May 30 '23 at 16:59

AdroMine

1,427
5
9

thanks for the suggestion. What does this do? – ifoxfoot May 30 '23 at 17:15
1

it creates a 'flex' container, sets the alignment of items within it to be placed side by side, and then sets the width of the container to not take the full horizontal space. You can read more about it if interested https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – AdroMine May 30 '23 at 18:06

TarJae · Accepted Answer · 2023-05-30T18:17:11.557

We could use style argument: style = "margin-top: 35px; margin-left: 10px; height: 38px;"

div() function creates a container element for selectInput and actionButton.

With the class argument we can assign CSS classes to the div element for adding styles to the container.

By adding the Bootstrap class d-flex class the container we can use flexbox layout.

library(shiny)
library(bslib)

ui <- navbarPage(
  "My App",
  id = "navbar",
  theme = bs_theme(
    version = 5,
    bootswatch = "darkly",
    base_font = "roboto",
    font_scale = 1.2
  ),
  tabPanel(
    "TAB 1",
    fluidPage(
      fluidRow(
        div(
          class = "d-flex",
          style = "margin-top: 32px;",
          selectInput(
            "dataset",
            label = "Dataset",
            choices = ls("package:datasets")
          ),
          actionButton(
            "enter",
            label = "Confirm Choice",
            style = "margin-top: 35px; margin-left: 10px; height: 38px;"
          )
        )
      ),
      verbatimTextOutput("summary"),
      tableOutput("table")
    )
  ),
  tabPanel("TAB 2", h3("bla bla"))
)

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

shinyApp(ui, server)

thanks! could you explain the `div()` class argument? – ifoxfoot May 30 '23 at 17:22 — ifoxfoot, May 30 '23 at 17:22

How to line up ui elements using style argument in shiny app that uses bslib 5

2 Answers2