时间戳

首页 > 解决方案 > R Shiny - 垂直对齐标签并以水平形式输入

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

问题描述

我正在尝试以水平形式垂直对齐输入及其标签。我不确定是否可以垂直对齐不同高度的内联 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, ...)：

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

标签： htmlcssrshiny

解决方案

也许只需将选项卡面板排列成多行，并在其中排列您喜欢的列。

#
#
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)

推荐阅读