As I work on developing a Shiny app, I am encountering an issue with displaying text blocks. These blocks vary in length, and my goal is to color each block while also creating some spacing between them.
The challenge I face is that due to the varying text lengths, coloring only extends up to the text itself, leaving empty spaces which results in a less-than-ideal appearance.
Additionally, the minimum gap between columns seems to be fixed at 1, which is visually too large for my liking.
https://i.sstatic.net/l4V0Q.png
My aim is to color Columns B & C up to the length of Column A, and at the same time reduce the gap between columns. Despite setting the offset to 1, I am unable to achieve a fraction less than 1.
Here is the current code resulting in the image 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)
I am seeking a solution to style this without relying on hardcoded pixel widths, as this could impact the user experience on different screen sizes and devices. Any advice on achieving equal coloring up to the length of the longest column or alternative methods for creating text boxes in Shiny would be greatly appreciated.
Thank you in advance for your assistance!