Search code examples
rshinyshinydashboard

Align Inputs with Labels and ActionButton vertically in fluidRow

In my shinydashboardPlus app, I use fluidRow/column to specify my layout. Sometimes, I have one or several textInput / selectInput and an actionButton in one row. Since the input elements do have a label, they are vertically larger than the button, which does not look very nice. For example:

vertically unaligned

Is there an easy way to move the actionButton a little below so that it is in line with, for example, the "local" element?

Here is a minimal example:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- shinydashboardPlus::dashboardPage(
    header=shinydashboardPlus::dashboardHeader(title = "Align Example"),
    sidebar=shinydashboardPlus::dashboardSidebar(
        shinydashboard::sidebarMenu(id = "tabs",
            shinydashboard::menuItem(
                "Welcome", tabName = "welcome"
            )
        )
    ),
    body=shinydashboard::dashboardBody(
        shinydashboard::tabItems(
            shinydashboard::tabItem(tabName="welcome", 
                shiny::fluidRow(
                    shinydashboardPlus::box(
                        status="black", solidHeader = TRUE, width=12, closable = FALSE,
                        title="Welcome!",
                        shiny::column(4, 
                            shiny::textInput("username", label="User Name:")
                        ),
                        shiny::column(4, 
                            shiny::passwordInput("passwd", label="Password:")
                        ),
                        shiny::column(2, 
                            shiny::selectInput(inputId="dbmode", "Modus:",
                                choices = c("production", "test", "local"),
                                selected = "local"
                            )
                        ),
                        shiny::column(2, 
                            shiny::actionButton("dbconnect", "Connect!")
                        )
                    )
                )
            )
        )   
    )
)

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

shiny::shinyApp(ui, server)
Solution

  • I went for an alternative approach:

    I looked at how shiny creates labels for other form components in the same row. Shiny adds a div container with a label similar to the one provided in the code below. By using the same classes shiny uses, I get the right dimensions without specifying pixels or distances manually.

    column(
        width = 2,
        div(
          class="form-group shiny-input-container",
          shiny::tags$label("\u00a0", class="control-label"),
          div(actionButton("dbconnect", "Connect!"))
        )
      )