Placing two actions buttons beside each other in a shiny app

Question

I am trying to place two action buttons in a Shiny app in a sidebar. Is this at all possible? I don't want to resort to using columns if I can keep things simple

ui.R:
fluidPage(
 # Application title
 titlePanel("Place Two Buttons"),

 sidebarLayout(
# Sidebar with a slider and selection inputs
sidebarPanel(

  actionButton("read", "Change"),
  hr(),
  actionButton("write", "Change") 
),


mainPanel(
  plotOutput("plot")
  )
)
)

and my server :

server.R:
function(input, output, session) {

}

All what I found so far was using css expressions or using Bootstrappage. Any help?

Possible duplicate of [shiny 4 small textInput boxes side-by-side](https://stackoverflow.com/questions/20637248/shiny-4-small-textinput-boxes-side-by-side) — Pork Chop, Jul 09 '17 at 07:15

Mike H. · Accepted Answer · 2017-07-08T22:16:06.920

2

You can remove the hr() to get the two buttons side by side:

ui <- fluidPage(
  # Application title
  titlePanel("Place Two Buttons"),

  sidebarLayout(
    # Sidebar with a slider and selection inputs
    sidebarPanel(
      actionButton("read", "Change"),
      actionButton("write", "Change") 
    ),

    mainPanel(
      plotOutput("plot")
    )
  )
)

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

Which gives this:

edited Jul 08 '17 at 22:16

answered Jul 08 '17 at 21:59

Mike H.

13,960
2
29
39

Mike H: What I meant is to place the two buttons beside each other rather than under each other. Is this possible? – owise Jul 08 '17 at 22:05
@owise, Why not just get rid of the `hr()` function? – Mike H. Jul 08 '17 at 22:08
@owise - updated. I don't know if you can make the space smaller, but you can probably add some blank UI to increase the space. Unfortunately HTML doesn't have a "vertical rule". – Mike H. Jul 08 '17 at 22:18
It worked fine, but when I add in this this expression, it does nnot work: ` withBusyIndicatorUI(actionButton("read", "Change!", class = "btn-primary")), withBusyIndicatorUI(actionButton("write", "Change!", class = "btn-primary"))` – owise Jul 08 '17 at 23:25
@owise Hmm, works fine for me. It might be helpful if you ask a new question with a reproducible example – Mike H. Jul 08 '17 at 23:52
@Mikw H. Do you mean it worked for you even when you put it inside the "withBusyIndicationUI"? – owise Jul 09 '17 at 00:43
Yes, I copied and pasted the code you wrote into my program and I still got the same result – Mike H. Jul 09 '17 at 21:00

Placing two actions buttons beside each other in a shiny app

1 Answers1