Formatting unequal column length texts in fluidRow in R Shiny

Question

I am currently building a Shiny app and would like to display some text blocks. The text blocks are of different lengths, and I would like to color each block and also have some gap between the blocks.

However since the blocks have different text lengths, I am only able to color the block upto the point where there is text and not in the empty area. However that results in a bit ugly coloring.

Also the minimum gap between the columns apparently is 1, and that is too much of a gap from a visual point of view.

What I want to get to is coloring of Columns B & C down to the length of Column A. I also want to reduce the gap between the columns and I have set it to an offset of 1, but I am unable to offset it to a fraction < 1.

This is the code that results in the picture above:

    ui <- fluidPage(
  mainPanel(
    tabsetPanel(
      tabPanel("Data Visualization",
               fluidRow(
                 column(3,h3("Title A",align = "center"),style = "background-color: red;"),
                 column(3,h3("Title B",align = "center"),style = "background-color: yellow;",offset = 1),
                 column(3,h3("Title C",align = "center"),style = "background-color: green;",offset = 1)
               ),
               fluidRow(
                 column(3, h4(tags$li("Text A")),style = "background-color: red;"),
                 column(3,tags$li(h4("Text B")),style = "background-color: yellow;",offset = 1),
                 column(3,tags$li(h4("Text C")),style = "background-color: green;",offset = 1)                       
               ),
               fluidRow(
                 column(3, h4(tags$li("More Text A")),style = "background-color: red;"),
                 column(3,"",style = "background-color: yellow;", offset = 1),
                 column(3,"",style = "background-color: green;", offset = 1)                       
               ),    
               fluidRow(
                 column(3, h4(tags$li("More and More Text A")),style = "background-color: red;"),
                 column(3,"",style = "background-color: yellow;", offset = 1),
                 column(3,"",style = "background-color: green;", offset = 1)                       
               )
))))

server <- function(input,output) {}

shinyApp(ui = ui, server = server)

Kindly let me know how do I style this without any hardcoded pixel widths (as that might impact the viewing experience of different screen sizes) to get the coloring equal to the max length column.

If there is another way to have such text boxes in shiny then also it would help to know.

Many thanks!

Answer 1

I think using shinydashboard::box() would be an easier approach:

library(shiny)
library(shinydashboard)

body <- dashboardBody(
# change this to set space between boxes
  tags$head(tags$style(
    HTML('.row div {padding: 0% 1% 0% 1% !important;}'))), 
  
  fluidRow(
    box(
      title = "Title A", width = 4, background = "red",
      "Some text that is contained within a red box"
    ),
    box(
      title = "Title B", width = 4, background = "yellow",
      "Some text that is contained within a yellow box and also a bit longer
      than the other boxes."
    ),
    box(
      title = "Title C",width = 4, background = "green",
      "Some text that is contained within a green box"
    )
  ), 
  
  fluidRow(
    box(
      width = 4, background = "red", 
      "And simply don't specify a title to create some more text about topic A."
    )
  )
)

ui <- dashboardPage(
  dashboardHeader(title = "Example of Dashboard"),
  dashboardSidebar(),
  body
)

shinyApp(ui = ui, server = function(input, output) { })

which gives you