是否需要在Shinydashboard的dashboardbody中水平对齐复选框?

时间:2019-03-23 20:58:21

标签: r shiny shinydashboard

我想根据Shinydashboard仪表板上的单选按钮输入显示一些复选框。但是,我能够这样做,但是这些复选框未水平对齐。我想使这些复选框成为矩阵,因为三列和多行也要在仪表板主体的右侧而不是在中心对齐它们。

是否有实现此目标的方法?附言-我尝试使用checkboxgroup,但无法为单个复选框设置ID。

下面是代码:

library(shiny)
library(shinyjs)
library(shinydashboard)
Scenario <- c("Personal Information", "Academic Information")
shinyApp(
ui = dashboardPage(title = "My Page",  
                 dashboardHeader(
                   title = "My Header",
                   titleWidth = 200
                 ),
                 dashboardSidebar(
                   width = 200,
                   sidebarMenu(
                     menuItem("My Data", selected = FALSE, 
                              menuSubItem(text = "My Data", tabName = 
   "my_data", newtab = TRUE, selected = FALSE)
                     )
                   )
                 ),
                 dashboardBody(
                   tabItems(
                     # First tab content
                     tabItem(tabName = "my_data",
                             h2("Please select fields"),
                             fluidRow(column(12,radioButtons('rbscenario', 
   NULL, Scenario, inline=TRUE))),
                             uiOutput('checkboxes',inline = TRUE)
                     ) 
                   ))),
 server = function(input, output){
 observe({
  input$absubmit
  if(input$rbscenario == "Personal Information"){
    output$checkboxes <- renderUI({
      dashboardBody(fluidRow(column(6,
                                    checkboxInput('CB_FN', 'First Name', value = FALSE),
                                    checkboxInput('CB_MN', 'Middle Name', value = FALSE),
                                    checkboxInput('CB_LN', 'Last Name', value = FALSE),
                                    checkboxInput('CB_DOB', 'Date of Birth', value = FALSE),
                                    checkboxInput('CB_GN', 'Gender', value = FALSE),
                                    checkboxInput('CB_CT', 'City', value = FALSE))),
                    actionButton('abSubmit',"Submit", icon = NULL)
      )})}
  else if(input$rbscenario == "Academic Information"){
    output$checkboxes <- renderUI({
      dashboardBody(fluidPage(
        fluidRow(column(12,
                        checkboxInput('CB_SC', 'School', value = FALSE, width = NULL),
                        checkboxInput('CB_CL', 'College', value = FALSE, width = NULL),
                        checkboxInput('CB_POS', 'Primary OS', value = FALSE, width = NULL),
                        checkboxInput('CB_PLN', 'Primary Programming Language', value = FALSE, width = NULL),
                        checkboxInput('CB_PDB', 'Database', value = FALSE, width = NULL),
                        checkboxInput('CB_NT', 'Networking', value = FALSE, width = NULL))),
        actionButton('abSubmit2',"Submit", icon = NULL)
      ))})}
  })
  })

This is the output I am getting

1 个答案:

答案 0 :(得分:2)

问题是dashboardBody()的使用位置不正确,因此留有较大的左页边距。行和列是手动建立的。

我已替换了您的这段代码

  dashboardBody(fluidRow(column(6,
                                checkboxInput('CB_FN', 'First Name', value = FALSE),
                                checkboxInput('CB_MN', 'Middle Name', value = FALSE),
                                checkboxInput('CB_LN', 'Last Name', value = FALSE),
                                checkboxInput('CB_DOB', 'Date of Birth', value = FALSE),
                                checkboxInput('CB_GN', 'Gender', value = FALSE),
                                checkboxInput('CB_CT', 'City', value = FALSE))),
                actionButton('abSubmit',"Submit", icon = NULL)
  )

使用

div(
  fluidRow(
    column(4,
           checkboxInput('CB_FN', 'First Name', value = FALSE),
           checkboxInput('CB_MN', 'Middle Name', value = FALSE)),
    column(4,
           checkboxInput('CB_LN', 'Last Name', value = FALSE),
           checkboxInput('CB_DOB', 'Date of Birth', value = FALSE)),
    column(4,
           ceckboxInput('CB_GN', 'Gender', value = FALSE),
           checkboxInput('CB_CT', 'City', value = FALSE))
  ),
actionButton('abSubmit',"Submit", icon = NULL)
)

得到这个

enter image description here

在第二个if条件(学术信息)下,您也应以dashboardBody()代替div()