htmlcssrshinyshinybs

How to align text inside bsButton?

I would like the text inside the bsButton ("En savoir plus") to be centered inside the button. It is currently left aligned and I am unable to change that. I have tried to use some CSS like adding "text-align:center;" next to the padding settings but it does not work.

library(shinyBS)
library(shiny)


ui <- sidebarLayout(sidebarPanel(
  width = 4,
  tags$style(HTML(
    '#helpsect{margin-top:50px;padding-left:1px;}'
  )),
  fluidRow(column(
    width = 8,
    br(),
    selectInput(
      inputId = "choixsect",
      label = HTML('<p style="color:;">Secteur de comparaison :'),
      choices = liste_sect,
      width = "250px"
    )
  ),
  column(
    width = 4,
    bsButton(inputId = "helpsect", label = "En savoir plus")
  )),
  sidebarPanel(width = 8)
))

enter image description here

Solution

  • The button label appears centered for me. You can set the button width to something big, like 500px to clearly see that the label is centered. The padding-left:1px; in your code makes it seem like it's left-aligned when the button width is snug. Just get rid of padding-left:1px; and it should be fine.

    Below is the code I used to check if the label is centered:

    library(shinyBS)
library(shiny)


ui <- sidebarLayout(sidebarPanel(
  width = 4,
  tags$style(HTML(
    '#helpsect{margin-top:50px; width: 500px;}'
  )),
  fluidRow(column(
    width = 8,
    br(),
    selectInput(
      inputId = "choixsect",
      label = 'Secteur de comparaison:',
      choices = list(1,2,3),
      width = "250px"
    )
  ),
  column(
    width = 4,
    bsButton(inputId = "helpsect", label = "En savoir plus")
  )),
  sidebarPanel(width = 8)
),
"")

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)