CODEWITHSUNDEEP
rshiny
LJG
LJG

Reputation: 767

Align a selectizeInput and two actionButtons horizontally

This is a snippet of my interface (if choices = c() it means that the choice is managed on the server side):

sidebarPanel(
    selectizeInput(
        "s1",
        "Select s1",
        choices = c(),
        multiple = FALSE
    ),
    div(style = "margin-top:-15px"),
    radioButtons(
        "r1",
        "Select r1",
        choices = c("A", "B", "C")
    ),
    div(style = "margin-top:-15px"),
    selectizeInput(
        "s2",
        "Select s2",
        choices = c(),
        multiple = FALSE
    ),
    div(style = "margin-top:-15px"),
    selectizeInput(
        "s3",
        "Select s3",
        choices = c(),
        multiple = TRUE
    ),
    div(style = "margin-top:-15px"),
    actionButton(
        "b1",
        "Enter"
    ),
    actionButton(
        "b2",
        "Enter"
    ),
    div(style = "margin-top:-15px"),
    selectizeInput(
        "s4",
        "Select s4",
        choices = c(),
        multiple = FALSE
    )
)

My question is: How can I arrange the selectizeInput s3 and the actionButtons b1 and b2 all on the same line horizontally?

Upvotes: 0

Views: 68

Answers (1)

danlooo
danlooo

Reputation: 10637

You can add columns in a fluid row:

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    fluidRow(
      column(
        width = 4,
        selectizeInput(
        "s3",
        "Select s3",
        choices = c(),
        multiple = TRUE,
      )),
      div(style = "margin-top:45px"),
      column(
        width = 4,
        actionButton("b1","Enter")
      ),
      div(style = "margin-top:45px"),
      column(
        width = 4,
        actionButton("b2","Enter")
      )
    )
  )
)


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

}

shinyApp(ui, server)

enter image description here

The action buttons do not have a title so they need to be pushed downwards e.g. using margin-top to align the buttons with the text input box.

Upvotes: 2

Related Questions