div align right checkboxInput in shiny dashboard not working

Question

My shiny dashboard has checkboxInput and I am trying to align it to right within the title of the box item. For smaller boxes (width of 6) the alignment is proper, however for boxes with width of 12, which ever way I realign the column values, the checkbox input remains at the middle of the box. The code is as follows:

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
    skin = "green",
    dashboardHeader(
        title = "TEST", titleWidth = 225
        ),
    dashboardSidebar(
        menuItem("TRENDS", tabName = "vactr", icon = shiny::icon("line-chart"))
        ),
    dashboardBody(
        tabItems(
            tabItem(
                tabName = "vactr",
                fluidRow(
                    box(
                        width = 12, status = "info", title = 
                            fluidRow(
                                column(6, "Trend - Usage of space",br(),
                                       div(downloadLink("downloadspacetrend", "Download this chart"), style = "font-size:70%", align = "left")),
                                column(6,
                                       div(checkboxInput(inputId = "spacetrendcheck", "Add to reports", value = FALSE),style = "font-size:70%",float = "right", align = "right", direction = "rtl"))
                                ),
                        div(plotOutput("spacetrend"), width = "100%", height = "400px", style = "font-size:90%;"),
                        uiOutput("spacetrendcomment")
                    )
                )

                )
            )
        )
    )


server <- function(input, output, session) {

}

shinyApp(ui = ui, server = server)

I want the "Add to reports" check box to the right end of the box. I tried using float, direction arguments with and without, but not getting the desired output.

Answer 1

There is the following reason for you problem: The header title's width is not set to the whole width of the box. Instead, its width is calculated from the elements it contains. This makes the columns (which are 50% title width) also depend on the elements. Your elements however are not that big, so the resulting div is in itself well divided in two equally large columns, but they together don't span the whole box width.

You can just fix the title width to 100% (box header width), which as a result tells the columns to be that large, whatever their content might be. This is a one line addition.

Note that the style addition in the code below affects all box titles. But I believe that this is never really a problem.

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
  skin = "green",
  dashboardHeader(
    title = "TEST", titleWidth = 225
  ),
  dashboardSidebar(
    menuItem("TRENDS", tabName = "vactr", icon = shiny::icon("line-chart"))
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "vactr",
        fluidRow(
          box(width = 12, status = "info", title = 
            fluidRow(
              tags$style(".box-title {width: 100%;}"),
              column(6, "Trend - Usage of space",br(),
                div(downloadLink("downloadspacetrend", "Download this chart"), style = "font-size:70%", align = "left")),
              column(6,
                div(checkboxInput(inputId = "spacetrendcheck", "Add to reports", value = FALSE),style = "font-size:70%",float = "right", align = "right", direction = "rtl"))
            ),
            div(plotOutput("spacetrend"), width = "100%", height = "400px", style = "font-size:90%;"),
            uiOutput("spacetrendcomment")
          )
        )
      )
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)