Tips for aligning UI components using the style argument in a shiny application leveraging bslib 5

I recently created a shiny app ui layout that functioned perfectly with bslib 4, but upon switching to bslib 5, my formatting completely fell apart. I can't seem to figure out the reason behind this.

Below is the code snippet:

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 utilizing bslib 4, it appears like this

https://i.sstatic.net/9iWPd.png

However, when shifting to bslib 5, it takes on this appearance

https://i.sstatic.net/Q91SW.png

Is there any way to align buttons in bslib 5? I prefer using bslib::card() in the results section of the app, hence the need for bslib 5.

Answer №1

Within your fluidRow, include the following:

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

Answer №2

To achieve the desired layout, we can utilize the style argument as follows:

style = "margin-top: 35px; margin-left: 10px; height: 38px;"

The div() function serves to create a container element for both selectInput and actionButton.

Through the use of the class argument, CSS classes can be assigned to the div element in order to apply styles to the container.

By incorporating the Bootstrap class d-flex, the container gains access to flexbox layout capabilities.

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)

https://i.sstatic.net/Yrhaf.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a grid design with evenly spaced row gaps

I am currently working on a grid layout featuring cards of varying heights. My goal is to maintain a consistent gap between the cards, creating a mosaic-like design. I am utilizing Styled Components for this project, but the current code I have doesn' ...

Discovering the preceding prime number with the help of R

I am currently facing an issue with finding the previous prime number for a given value using the code provided. The code works well when I input a prime number directly, like lp(7) which returns 7. However, if I try lp(6), it does not display any result. ...

Aligned sections within a Susy layout

Although Susy is a powerful tool, I have noticed a potential weakness with it. For example, imagine having three floated block elements within a container named "blocks": The "block" element is assigned a "span(4 of 12)" <div class="blocks"> &l ...

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

From SCSS to Style.css: Transforming Sassy Casc

Recently, the lead developer who worked on this project has left the company and now I have been tasked with taking over the project. Any assistance or guidance in this transition would be greatly appreciated. I must admit, I am not well-versed in WordPre ...

What is preventing the scrollbar-color property from being applied directly to the body element?

I've been experimenting with styling my scrollbars using CSS properties, like those described at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars. Interestingly, when I apply these properties directly to the body element with code like ...

An error is triggered when attempting to target multiple element Id's in Javascript and one of them cannot be located

I have encountered an issue when trying to target multiple IDs with JavaScript in order to disable input fields associated with them. The script I am using seems straightforward, but I noticed that on pages where the middle element is missing, the third on ...

CSS - Make the entire div clickable while leaving a specific area non-clickable

I have a block containing some information. Within this div is a hidden button labeled .remove. Clicking on the main block will take you to another page, while hovering over the div will reveal the button. However, clicking the button also navigates you aw ...

Is the button inactive until an action is taken?

In my coding project, I am working with two buttons. I am trying to figure out a way to disable the second button until the first button is clicked. Does anyone have any suggestions on how to achieve this using a combination of JavaScript and CSS? ...

What is the best way to display the counter result on the cards at the top of an html webpage?

My latest project involves a comparison script using Groovyscript to analyze two distinct files. Embedded within the Groovyscript is HTML code that utilizes CSS and potentially Bootstrap of any version. I have successfully implemented counters with a titl ...

Incorporating ratings and heart icons next to every movie title

I am tasked with creating a simple Movie listing website where users can add or remove movies from their favorites list. Instead of a standard add to favorites button, I would like to use the heart icon from Bootstrap. Additionally, I want to display the r ...

A guide on implementing Flex Direction in React

For my latest project, I decided to create a web page using Cards in React. To achieve this, I utilized React Bootstrap for the card components. However, I encountered an issue with setting the flex property. Below is a snippet of my component: import &ap ...

Dimensions of image details

I am working on an article that includes an image with a description. The challenge is that the description should not exceed the width of the image, but since the image width varies, fixing the width with a class .article-image is not a viable solution. ...

Tips for creating a vintage, weathered font appearance on a web browser

Is it possible to create unique, randomly outwashed letters using a standard font? Instead of relying on pre-designed outwashed fonts available at , I am interested in achieving the same effect with a regular font that appears washed out when displayed in ...

Ensuring Consistent Height for Bootstrap Card Headers

I am currently working with bootstrap cards on two different web pages. The challenge I am facing is that on one page, the header text has a fixed height so I can easily match their card-header height using min-height. However, on the second page, the card ...

Localhost is fine, but Github pages are just not cooperating with Bootstrap

I am currently in the process of building a portfolio website using Bootstrap 4, animate.css, typed.js and my own custom css. When testing the site on localhost through VS Code, everything appears to be functioning correctly. However, upon viewing the sit ...

Having trouble with applying a class in Gtk3 css?

MY ATTEMPT AND EXPLANATION: In my application, I have the following layout structure: GtkWindow GtkOverlay GtkBox GtkGrid GtkButton Even after trying to apply this CSS style: GtkButton{ background-color:blue; } T ...

Styling Angular with FullCalendar - Personalized CSS Design

I'm struggling with custom styling using FullCalendar for Angular. Specifically, I need to change the background color of the 'More Events' Popover, but no matter what I attempt, my styles aren't taking effect. I've been trying to ...

Steps to customize the Spark theme in Flex 4

In the default Spark theme in Flex 4, what type of styling is included? Additionally, how can one override the Spark theme? For instance, when attempting to change the background color but seeing no effect, even though the CSS code appears correct. Here&ap ...

Issue with banner not appearing after importing HTML document

On my website, I have a picture banner at the top that I got from a web service. To make editing easier, I import the header.html code into the home.html file. The banner displays perfectly when I run header.html, but not when I run home.html. When I inspe ...