rshinybslib

text-align not working when changing from fluidPage to page_fluid


I'm trying to align two inputs side by side and when I use fluidPage it works fine but when I change to page_fluid, the text (+ sign) is not centered anylonger.

library(shiny)
library(bslib)

ui <- page_fluid(  layout_columns(col_widths = c(10, 2),
                                  textInput("text", NULL, placeholder = "Name"),
                                  actionButton("ab", NULL, icon =  icon("plus"), style = "height: 36px; text-align: center;")
),
actionButton("ab1", NULL, icon =  icon("plus"), style = "height: 36px; text-align: center;"))

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

shinyApp(ui, server)

Solution

  • The default is for both vertical and horizontal centered alignment. But there is also a default for padding. After the padding, the plus sign does not fit, so it overflows downwards. If you remove top and bottom padding, then the vertical alignment can do its job.

    library(shiny)
    library(bslib)
    
    ui <- page_fluid(  layout_columns(col_widths = c(10, 2), fillable = FALSE,
                                      textInput("text", NULL, placeholder = "Name"),
                                      actionButton("ab", NULL, icon =  icon("plus"), style = "height: 36px; padding-top: 0px; padding-bottom: 0px;")
    ),
    actionButton("ab1", NULL, icon =  icon("plus"), style = "height: 36px; padding-top: 0px; padding-bottom: 0px;"))
    
    server <- function(input, output, session) {
      
    }
    
    shinyApp(ui, server)