0

私の光沢のあるダッシュボードには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)

[レポートに追加] チェック ボックスをボックスの右端に配置します。フロート、方向引数の有無にかかわらず使用しようとしましたが、目的の出力が得られませんでした。

4

1 に答える 1

2

問題には次の理由があります: ヘッダー タイトルの幅がボックスの幅全体に設定されていません。代わりに、その幅は含まれる要素から計算されます。これにより、列 (タイトル幅の 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)
于 2016-06-01T09:47:34.653 に答える