Vertically centering text within an R Shinydashboard box

Question

I can't figure out how to vertically align text within a "box" using R shiny dashboard. I know you can't vertically align text inline using e.g., span. Padding hasn't worked for me (though I might be doing it wrong).

Most promisingly, I saw this suggestion to create a tag style with flex display--but it only works to center the text horizontally, not vertically! Perhaps I'm adding the style info to the wrong place. Here's some "app.R" code that shows off the issue:

# ------------------------------------------------------------------------------
# SET-UP

library(shiny)          # shiny application
library(shinydashboard) # shiny dashboard toolkit

rm(list = ls()) # remove variables from working environment
shinyOptions(cache = cachem::cache_disk("./app_cache/cache/"))

boxHeight = "30em" # Box height

# ------------------------------------------------------------------------------
# CREATE DASHBOARD

# Header content
header <- dashboardHeader(
  title = span("Play Dashboard", 
               style = "color: white; font-size: 28px"), 
  disable = FALSE, 
  titleWidth  = 550
)

# Sidebar content
sidebar <- dashboardSidebar(
  width = 260,
  collapsed = TRUE,
  sidebarMenu(
    menuItem("Dashboard Tab 1", tabName = "tab1", icon = icon("tachometer-alt"))
  )
)

# Body content
body <- dashboardBody(
  # Here, I try to implement the earlier Stack Overflow suggestion
  tags$style(HTML('
            #textbox {
            display: flex;
            align-items: center;
            justify-content: center;
            align-content: center;
            }
        ')),
  tabItems(
    # 1ST TAB: KEY ECONOMIC INDICATORS
    tabItem(tabName = "tab1",
            fluidRow(
              box(height = boxHeight,
                  id = "textbox",
                  "This isn't vertically centered."),
              box(
                height = boxHeight,
                id = "textbox",
                span("This isn't vertically centered, either.", id="textbox"),
              ),
              box(height = boxHeight,
                  span("Nor is this!", id="textbox")),
              box(height = boxHeight,
                  "But they're all horizontally centered, unlike this ...")
            )
    )
  )
)

server <- function(input,output){
}

#Dashboard page
dashboard <- dashboardPage(header, sidebar, body, tags$head(tags$style(HTML('* {font-family: "Lucida Sans"}!important;'))))

shinyApp(dashboard, server)

Any help would be appreciated!

Kat Kat · Accepted Answer · 2021-10-21T23:45:40

All you need to do is change #textbox to .box in the tags of dashboardBody(). You were right there.

So why, why, why? The id textbox was really only encapsulating what span encapsulated. So you really were centering vertically the entire time. However, if you wanted to center the text in the entire box, you needed to go up a level. I used developer tools to find out what id or class would work.

Notice the highlight - that's what you're referring to with #textbox

Notice the highlight - that's what you're referring to with .box.

Alright, you asked about changing one specific box in the comments. So I've add the following:

Yes, you can. Alright, if you wanted to change the second box, for example look for something within the tags, classes and ids that isolates the box you're wanted to change. For the second box, I would look at the class col-sm-6 and the class box.

To set tags for this box and beyond you can set the HTML tags to .col-sm-6 + .col-sm-6 div.box{css here}. If you only wanted that box changed, then use the same method to flip the CSS back. This is what this might look like in dashboardbody(). (For this example, I changed the id in the second box in tabItem to "textbox2."):

.box {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}
.col-sm-6 + .col-sm-6 div.box {       
font-weight: bold;
transform: rotate(-25deg);
}
.col-sm-6 + .col-sm-6 + .col-sm-6 div.box {       
font-weight: normal;
transform: rotate(0deg);
}
#textbox2 {
transform: rotate(25deg);
}

This is what this looks like

Vertically centering text within an R Shinydashboard box

1 Answers