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

t1qtbnec 于 2023-09-27 发布在其他

关注(0)|答案(3)|浏览(95)

在我的shinydashboardPlus应用程序中，我使用fluidRow/column来指定布局。有时，我在一行中有一个或多个textInput/selectInput和一个actionButton。由于输入元素确实有一个标签，它们在垂直方向上比按钮大，这看起来不是很好。举例来说：

有没有一种简单的方法可以将actionButton移到下面一点，使其与“local”元素等对齐？
下面是一个简单的例子：

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)

来源：https://stackoverflow.com/questions/70541807/align-inputs-with-labels-and-actionbutton-vertically-in-fluidrow

3条答案

按热度按时间

ubof19bj1#

在SelectorGadget的帮助下，然后搜索SO“margin-bottom”，我找到了this post，这让我找到了

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

不知道这是不是好的做法，但我现在很高兴。

赞(0）回复(0）举报 2023-09-27

1bqhqjot2#

我选择了另一种方法：
我研究了shiny如何为同一行中的其他表单组件创建标签。Shiny添加了一个div容器，其中的label类似于下面代码中提供的label。通过使用shiny使用的相同类，我可以获得正确的尺寸，而无需手动指定像素或距离。

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

赞(0）回复(0）举报 2023-09-27

brgchamk3#

我能想到的最简单的方法是在操作按钮之前添加一个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)

赞(0）回复(0）举报 2023-09-27

我来回答

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

3条答案

相关问题

热门标签

最新问答