2016-06-01 5 views
0

내 반짝이는 대시 보드에는 checkboxInput이 있으며 상자 항목의 제목 내에서 바로 정렬하려고합니다. 작은 상자 (너비 6)의 경우 정렬이 적절하지만 너비가 12 인 상자의 경우 열 값을 다시 정렬하는 경우 체크 상자 입력이 상자의 중앙에 유지됩니다. 코드는 다음과 같습니다.div align right checkbox 빛나는 대시 보드의 입력이 작동하지 않습니다.

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 인수를 사용하거나 사용하지 않고 원하는 출력을 얻지 못했습니다.

답변

2

다음과 같은 이유 때문에 문제가 발생할 수 있습니다. 머리글 제목의 너비가 상자의 전체 너비로 설정되어 있지 않습니다. 대신 너비가 포함 된 요소에서 계산됩니다. 이로 인해 열 (50 % 제목 너비 임)이 요소에 종속됩니다. 그러나 요소는 그리 크지 않기 때문에 결과 div는 그 자체로 두 개의 똑같은 큰 열로 잘 나뉘지만 모두 함께 상자 너비에 걸쳐 있지 않습니다.

제목의 너비는 100% (상자 머리글 너비)으로 고정 될 수 있습니다. 결과적으로 제목이 그 내용이 무엇이든 상관없이 큰 것으로 표시됩니다. 이것은 한 행 추가입니다.

아래 코드의 스타일 추가는 모든 상자 제목에 영향을줍니다. 그러나 저는 이것이 결코 절대로 문제가 아니라고 생각합니다.

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) 
+0

감사합니다 ... 이러한 옵션을 알지 못했습니다 .... 감사합니다. Lovely, 수정 사항은 앱에있는 모든 탭과 상자에 적용되었습니다. – Apricot