Question

我正在尝试以水平形式垂直对齐输入及其标签。我不确定是否可以垂直对齐不同高度的内联div。

以下代码为我提供了以下内容：

我希望标签与输入对齐。

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

ui <- fluidPage(

  column(width = 8, 

    tabBox(width = 12, 

      tabPanel(
        'Items', 

        fluidRow(
          style = 'margin:2px',

          wellPanel(
              tags$form(class = 'form-horizontal',
                tags$b('Filter items'),

                tags$div(
                  class = 'form-group',

                  tags$label(class = "col-sm-3 control-label", `for` = 'type', "By type:"), 
                  column(
                    width = 9, 
                    pickerInput(
                      inputId = 'type', label = '', 
                      choices = character(0), 
                      multiple = T
                    ))), 

                tags$div(
                  class = 'form-group',

                  tags$label(class = "col-sm-3 control-label", `for` = 'name', "By name:"), 
                  column(
                    width = 9, 
                    searchInput(
                      inputId = 'name', label = '',
                      placeholder = "Search by name",
                      btnSearch = icon("search"),
                      btnReset = icon("remove")
                    ))
                  )
                )
              )
          )
      )
    )
  ) #/column 8
)

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

shinyApp(ui, server)

除了column(width = 3, ...)以外我还尝试了什么：

flex：tags$div(class = 'form-group', style = 'display:flex; align-items:center;', ...)
位置：tags$div(class = 'form-group', style = 'display:table; position:absolute;', tags$label(class = "col-sm-3 control-label", style = 'display;table-cell; vertical-align:middle;', ...), ...)。

我对HTML并不精通，因此需要大量的猜测。达到预期结果的最佳方法是什么？任何帮助将不胜感激。

Answer 1

也许只是将标签面板排列成多个流体行，然后在这些内部，用列来排列您喜欢的东西。

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

ui <- fluidPage(
    tabBox(
        tabPanel(title = "Items",
                 wellPanel(
                     fluidRow(column(width = 12,"Filter Items")),
                     br(),
                     fluidRow(
                         column(width = 3,"By Type: "),
                         column(width = 9,
                                pickerInput(inputId = "choices.type",
                                            choices = character(0),
                                            multiple = TRUE))
                            ),
                     fluidRow(
                         column(width = 3,"By Name: "),
                         column(width = 9,
                                searchInput(inputId = "seach.name",
                                            placeholder = "Search",
                                            btnSearch = icon("search"),
                                            btnReset =  icon("remove")))
                            )
                        )

                )
        )
)

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

}

shinyApp(ui, server)

R Shiny-垂直对齐标签并以水平形式输入

1 个答案: