div align right checkboxInputは光沢のあるダッシュボードで動作しません

Question

私の光沢のあるダッシュボードにはcheckboxInputがあり、ボックスアイテムのタイトル内で右揃えしようとしています。より小さいボックス（幅6）の場合、アラインメントは適切ですが、カラムの値を再調整するための幅が12のボックスの場合、チェックボックスの入力はボックスの中央に残ります。コードは次のとおりです。

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) 

ボックスの右端に[レポートに追加]チェックボックスを使用します。 float、direction引数の有無にかかわらず、目的の出力を得られませんでした。

Answer 1

問題の原因は次のとおりです。ヘッダータイトルの幅は、ボックスの幅全体に設定されていません。代わりに、その幅は含まれている要素から計算されます。これにより、列（50％タイトル幅）も要素に依存します。しかし、あなたの要素はそれほど大きくはないので、結果として得られるdivは2つの等しく大きな列に分かれていますが、それらは一緒になってボックス幅全体に広がっていません。

タイトルの幅を100%（ボックスのヘッダーの幅）に固定するだけで、内容がどのようなものであっても、列のサイズが大きくなることがわかります。 これは1行追加です。

以下のコードのスタイルの追加は、すべてのボックスタイトルに影響します。しかし、これは本当に問題ではないと私は信じています。

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)