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

t1qtbnec  于 2023-09-27  发布在  其他
关注(0)|答案(3)|浏览(116)

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

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

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinydashboardPlus)
  4. ui <- shinydashboardPlus::dashboardPage(
  5. header=shinydashboardPlus::dashboardHeader(title = "Align Example"),
  6. sidebar=shinydashboardPlus::dashboardSidebar(
  7. shinydashboard::sidebarMenu(id = "tabs",
  8. shinydashboard::menuItem(
  9. "Welcome", tabName = "welcome"
  10. )
  11. )
  12. ),
  13. body=shinydashboard::dashboardBody(
  14. shinydashboard::tabItems(
  15. shinydashboard::tabItem(tabName="welcome",
  16. shiny::fluidRow(
  17. shinydashboardPlus::box(
  18. status="black", solidHeader = TRUE, width=12, closable = FALSE,
  19. title="Welcome!",
  20. shiny::column(4,
  21. shiny::textInput("username", label="User Name:")
  22. ),
  23. shiny::column(4,
  24. shiny::passwordInput("passwd", label="Password:")
  25. ),
  26. shiny::column(2,
  27. shiny::selectInput(inputId="dbmode", "Modus:",
  28. choices = c("production", "test", "local"),
  29. selected = "local"
  30. )
  31. ),
  32. shiny::column(2,
  33. shiny::actionButton("dbconnect", "Connect!")
  34. )
  35. )
  36. )
  37. )
  38. )
  39. )
  40. )
  41. server <- function(input, output, session) {
  42. }
  43. shiny::shinyApp(ui, server)
ubof19bj

ubof19bj1#

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

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

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

1bqhqjot

1bqhqjot2#

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

  1. column(
  2. width = 2,
  3. div(
  4. class="form-group shiny-input-container",
  5. shiny::tags$label("\u00a0", class="control-label"),
  6. div(actionButton("dbconnect", "Connect!"))
  7. )
  8. )
brgchamk

brgchamk3#

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

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinydashboardPlus)
  4. ui <- shinydashboardPlus::dashboardPage(
  5. header=shinydashboardPlus::dashboardHeader(title = "Align Example"),
  6. sidebar=shinydashboardPlus::dashboardSidebar(
  7. shinydashboard::sidebarMenu(id = "tabs",
  8. shinydashboard::menuItem(
  9. "Welcome", tabName = "welcome"
  10. )
  11. )
  12. ),
  13. body=shinydashboard::dashboardBody(
  14. shinydashboard::tabItems(
  15. shinydashboard::tabItem(tabName="welcome",
  16. shiny::fluidRow(
  17. shinydashboardPlus::box(
  18. status="black", solidHeader = TRUE, width=12, closable = FALSE,
  19. title="Welcome!",
  20. shiny::column(4,
  21. shiny::textInput("username", label="User Name:")
  22. ),
  23. shiny::column(4,
  24. shiny::passwordInput("passwd", label="Password:")
  25. ),
  26. shiny::column(2,
  27. shiny::selectInput(inputId="dbmode", "Modus:",
  28. choices = c("production", "test", "local"),
  29. selected = "local"
  30. )
  31. ),
  32. shiny::column(2,
  33. br(),
  34. shiny::actionButton("dbconnect", "Connect!")
  35. )
  36. )
  37. )
  38. )
  39. )
  40. )
  41. )
  42. server <- function(input, output, session) {
  43. }
  44. shiny::shinyApp(ui, server)

展开查看全部

相关问题