Vasim Vasim - 1 month ago 12
CSS Question

Align valuebox in box with offset in Shiny

ui <- dashboardPage(
dashboardHeader(title = "Sales"),
dashboardSidebar(),
dashboardBody(

tags$style(HTML(".box-header{background:#d2d2d2; color:#d83000; text-align:center;}")),

shinyUI(fluidPage(
fluidRow(
box(fluidRow(column(width = 12,
valueBox(1000,"Total Sales", width = 2),
valueBox(500,"Existing Sales", width = 2),
valueBox(300,"New Sales", width = 2),
valueBox(100,"Lost Sales", width = 2),
valueBox(100,"Unclassified Sales", width = 2))),
fluidRow(column(width=12, offset = 2,valueBox(250, "within existing sales", width = 2))),
width = 12, title = tags$b("BUSINESS MODEL"), solidHeader = TRUE)
)#,
#box(title = "Title", height = 20, width = 8, solidHeader = TRUE)

))))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {

})

# Run the application
shinyApp(ui = ui, server = server)


Result

enter image description here

As you can see the "within existing sales"
valuebox
is not in align with "existing sales"
valuebox
. I tried offsetting with as 3.5 but it does not work. I even tried inspecting the result but I not much of a programmer.

Answer

The second row is not aligned because you are adding a offset of 2 to a column with a width of 12. On Bootstrap, you can not use more than 12 column in a row.

To solve that you should use a column-based layout, using a column for each valueBox and setting width = NULL. The follow example is using to separate rows, but you can also use only one row.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Sales"),
  dashboardSidebar(),
  dashboardBody(

    tags$style(HTML(".box-header{background:#d2d2d2; color:#d83000; text-align:center;}")),

  shinyUI(fluidPage(
    fluidRow(
      box( width = 12, title = tags$b("BUSINESS MODEL"), solidHeader = TRUE,
        fluidRow(
          column(width = 2, valueBox(1000,"Total Sales", width = NULL)),
          column(width = 2, valueBox(500,"Existing Sales", width = NULL)),
          column(width = 2, valueBox(300,"New Sales", width = NULL)),
          column(width = 2, valueBox(100,"Lost Sales", width = NULL)),
          column(width = 2, valueBox(100,"Unclassified Sales", width = NULL))
        ),
        fluidRow(
          column(width = 2, offset = 2,
            valueBox(250, "within existing sales", width = NULL)
          )
        )
      )  
    )#,
    #box(title = "Title", height = 20, width = 8, solidHeader = TRUE)

))))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {

})

# Run the application 
shinyApp(ui = ui, server = server)