在 FluidRow 中将输入与标签和 ActionButton 垂直对齐

Question

在我的

shinydashboardPlus

应用程序中，我使用

fluidRow

/

column

来指定我的布局。有时，我在一排中有一个或多个

textInput

/

selectInput

和一个

actionButton

。由于输入元素确实有标签，因此它们在垂直方向上比按钮大，这看起来不太好。例如：

是否有一种简单的方法可以将

actionButton

移到下方一点，使其与“本地”元素等保持一致？

这是一个最小的例子：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- shinydashboardPlus::dashboardPage(
    header=shinydashboardPlus::dashboardHeader(title = "Align Example"),
    sidebar=shinydashboardPlus::dashboardSidebar(
        shinydashboard::sidebarMenu(id = "tabs",
            shinydashboard::menuItem(
                "Welcome", tabName = "welcome"
            )
        )
    ),
    body=shinydashboard::dashboardBody(
        shinydashboard::tabItems(
            shinydashboard::tabItem(tabName="welcome", 
                shiny::fluidRow(
                    shinydashboardPlus::box(
                        status="black", solidHeader = TRUE, width=12, closable = FALSE,
                        title="Welcome!",
                        shiny::column(4, 
                            shiny::textInput("username", label="User Name:")
                        ),
                        shiny::column(4, 
                            shiny::passwordInput("passwd", label="Password:")
                        ),
                        shiny::column(2, 
                            shiny::selectInput(inputId="dbmode", "Modus:",
                                choices = c("production", "test", "local"),
                                selected = "local"
                            )
                        ),
                        shiny::column(2, 
                            shiny::actionButton("dbconnect", "Connect!")
                        )
                    )
                )
            )
        )   
    )
)

server <- function(input, output, session) {
}

shiny::shinyApp(ui, server)

Answer 1

在 SelectorGadget 的帮助下，然后搜索“margin-bottom”，我发现了这篇文章，这让我发现了

shiny::column(2, 
    shiny::actionButton(ns("dbconnect"), "Connect!"),
    style = "margin-top:25px;" ## <-- !
)

不确定这是否是好的做法，但我现在很高兴。

Answer 2

我能想到的最简单的方法是在操作按钮之前添加一个

br()

：

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- shinydashboardPlus::dashboardPage(
  header=shinydashboardPlus::dashboardHeader(title = "Align Example"),
  sidebar=shinydashboardPlus::dashboardSidebar(
    shinydashboard::sidebarMenu(id = "tabs",
                                shinydashboard::menuItem(
                                  "Welcome", tabName = "welcome"
                                )
    )
  ),
  body=shinydashboard::dashboardBody(
    shinydashboard::tabItems(
      shinydashboard::tabItem(tabName="welcome", 
                              shiny::fluidRow(
                                shinydashboardPlus::box(
                                  status="black", solidHeader = TRUE, width=12, closable = FALSE,
                                  title="Welcome!",
                                  shiny::column(4, 
                                                shiny::textInput("username", label="User Name:")
                                  ),
                                  shiny::column(4, 
                                                shiny::passwordInput("passwd", label="Password:")
                                  ),
                                  shiny::column(2, 
                                                shiny::selectInput(inputId="dbmode", "Modus:",
                                                                   choices = c("production", "test", "local"),
                                                                   selected = "local"
                                                )
                                  ),
                                  shiny::column(2,
                                                br(),
                                                shiny::actionButton("dbconnect", "Connect!")
                                  )
                                )
                              )
      )
    )   
  )
)

server <- function(input, output, session) {
}

shiny::shinyApp(ui, server)

Answer 3

我采用了另一种方法：

我研究了shiny如何为同一行中的其他表单组件创建标签。 Shiny 添加了一个

div

容器，其中的

label

与上面代码中提供的类似。通过使用相同的闪亮类，我可以获得正确的尺寸，而无需手动指定像素或距离。

column(
        width = 2,
        div(
          class="form-group shiny-input-container",
          shiny::tags$label("\u00a0", class="control-label"),
          div(actionButton("dbconnect", "Connect!"))
        )
      )