R Shiny - Вертикальное выравнивание метки и ввод в горизонтальной форме

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)