div 闪亮仪表板中的右对齐复选框输入不起作用

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)

我想要 "Add to reports" 复选框到框的右端。我尝试使用浮点数、带方向参数和不带方向参数，但没有得到所需的输出。

Answer 1

您出现问题的原因如下： header 标题的宽度没有设置为框的整个宽度。相反，它的宽度是根据它包含的元素计算的。这使得列（标题宽度为 50%）也取决于元素。然而，您的元素并没有那么大，因此生成的 div 本身很好 divided 在两个同样大的列中，但它们加起来并没有跨越整个框的宽度。

您可以将标题宽度固定为 100%（方框 header 宽度），这样一来，无论其内容是什么，列都应该那么大。这是一行加法。

请注意，下面代码中添加的样式会影响所有框标题。但我相信这从来都不是真正的问题。

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)

div 闪亮仪表板中的右对齐复选框输入不起作用

div align right checkboxInput in shiny dashboard not working

checkbox

right-align

shiny