Q:

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

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.

A:

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)

