Ad
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:
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)
Ad
Answer
The easiest way I can think of is to ad a br()
before the action button:
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,
br(),
shiny::actionButton("dbconnect", "Connect!")
)
)
)
)
)
)
)
server <- function(input, output, session) {
}
shiny::shinyApp(ui, server)
Ad
source: stackoverflow.com
Related Questions
- → OctoberCMS Backend Loging Hash Error
- → "failed to open stream" error when executing "migrate:make"
- → OctoberCMS - How to make collapsible list default to active only on non-mobile
- → Create plugin that makes objects from model in back-end
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → How to install console for plugin development in October CMS
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → October CMS - Conditionally Load a Different Page
Ad