将动作按钮与 selectinput 水平对齐答案

【问题标题】：align actionbutton with selectinput horizontally in shiny将动作按钮与 selectinput 水平对齐
【发布时间】：2020-08-07 16:36:59
【问题描述】：

在我的闪亮仪表板中，我需要将actionButton 与我的其他selectInputs 水平放置在一个框中。下面是我的应用程序。 actionButton 似乎与其他输入没有很好地对齐。该按钮位于稍高的位置。我不明白为什么会这样。有人知道怎么解决吗？

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
    dashboardHeader(title = "example"),
    dashboardSidebar(),
    dashboardBody(
        box(width=12,

            column(width = 3, dateRangeInput("order_dash_dateRange", "Date Range",
                                             start  = "2017-01-01",
                                             end    =  Sys.Date(),
                                             min    = "2001-01-01",
                                             max    = Sys.Date(),
                                             format = "mm/dd/yy",
                                             separator = " - ") ),

            column(width=3, selectizeInput(inputId = 'var', 
                                           label='Select variable',
                                           choices = c('cut', 'color'), 
                                           multiple=FALSE,
                                           options = list(
                                               maxItems = 1,
                                               placeholder = '',
                                               onInitialize = I("function() { this.setValue(''); }"))) ),
            column(width=3,  uiOutput("valueUI")),

            column(width=3,  actionButton('go', 'apply filter') )


        )
    )
)

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

    output$valueUI = renderUI({

        if (input$var == '') {
            vals = '' 
        }
        if (input$var == 'cut') {
            vals = c('Premium', 'Good', 'Very Good', 'Fair')  
        }
        if (input$var == 'color'){
            vals = c('E', 'J', 'I', 'H')
        }

        selectizeInput(inputId = 'value', 
                       label='Select values',
                       choices = vals, 
                       multiple=FALSE,
                       options = list(
                           maxItems = 1,
                           placeholder = '',
                           onInitialize = I("function() { this.setValue(''); }")))

    })


}

shinyApp(ui, server)

【问题讨论】：

标签： r shiny shinydashboard

【解决方案1】：

您可以通过手动将相同数量（高度）的边距添加到 actionButton 来修复它

因为其他dateRangeInput、selectizeInput、uiOutput 有 20px label 和 5px 边距作为图像。

在顶部添加 25px 将与 actionButton 对齐。

actionButton('go', 'apply filter', style = 'margin-top:25px')

【讨论】：