首页 > 解决方案 > 将操作按钮与闪亮仪表板中的输入对齐

问题描述


你好。
我正在尝试将 materialSwitch 复选框与一些 pickerInput 框对齐。
这是它的样子和我想要的样子:

在此处输入图像描述


这是问题的简化代码,请帮助!

library(shiny)
library(shinydashboard)
library(shinyWidgets)

#----------------------------------------------------------------------------#

ui <- {dashboardPage(
  dashboardHeader(title=""),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(box(column(materialSwitch("t0"),width=1),
                 column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
                        pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
                 column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
                        pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
                 column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
                        pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
                 actionButton("t7","",width="100%"),width=12))))
}

#----------------------------------------------------------------------------#

server <- function(input, output) {}

#----------------------------------------------------------------------------#

shinyApp(ui = ui, server = server)

另外,如果有办法收紧空间,或者减少开关和输入框之间的边距,就会膨胀。我当前的代码还使其中一个选择器输入的宽度与其他选择器输入的宽度不同(包括开关),如果有一种方法可以使它们成比例,那么它们的宽度都相同,会更加膨胀。


谢谢。

标签: rshinyshinydashboard

解决方案


您可以应用一些 css 来移动materialSwitch.

div(column(materialSwitch("t0"),width=1), style = 'top: 25px;position:relative;')

完整代码 -

library(shiny)
library(shinydashboard)
library(shinyWidgets)

#----------------------------------------------------------------------------#

ui <- {dashboardPage(
  dashboardHeader(title=""),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(box(div(column(materialSwitch("t0"),width=1), style = ' top: 25px;position: relative;'),
                 column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
                        pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
                 column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
                        pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
                 column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
                        pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
                 actionButton("t7","",width="100%"),width=12))))
}

#----------------------------------------------------------------------------#

server <- function(input, output) {}

#----------------------------------------------------------------------------#

shinyApp(ui = ui, server = server)

在此处输入图像描述


推荐阅读