Question

在我的闪亮仪表板上，我需要将actionButton与其他selectInput放在一个盒子中水平放置。以下是我的应用程序。 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)

Answer 1

您可以通过手动向actionButton添加相同量（高度）的边距来解决此问题

由于其他dateRangeInput，selectizeInput，uiOutput具有20像素label和5像素空白作为图像。

在顶部添加25像素会很好地对齐actionButton。

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

将操作按钮与selectinput对齐，水平闪亮

1 个答案: