Joe
Joe

Reputation: 1768

How to increase the space between two centered action buttons?

I want to center two actions buttons of equal width with some space between them. So I tried:

library(shiny)

ui <- fluidPage(
  fluidRow(
    align = "center",
    br(),
    column(
      12,
      actionButton(
        inputId = "ab1",
        label = "Left button",
        style = "width:400px"
      ),
      actionButton(
        inputId = "ab2",
        label = "Right button",
        style = "width:400px"
      )
    ) # column 
  ) # fluidRow
) # fluidPage

server <- function(input, output) {}

shinyApp(ui, server)

This gives:

enter image description here

How to increase the space between the two buttons? Following Shiny - How to increase spacing between inline radio buttons? I tried style = "width:400px; margin.left:200px" on the right button, but this did not have any effect.

EDIT: Following Stephane's proposal I tried:

library(shiny)

ui <- fluidPage(
  fluidRow(
    align = "center",
    br(),
    column(
      6,
      actionButton(
        inputId = "ab1",
        label = "Left button",
        style = "width:400px"
      )
    ),
    column(
      6,
      actionButton(
        inputId = "ab2",
        label = "Right button",
        style = "width:400px"
      )
    ) 
  ) # fluidRow
) # fluidPage

server <- function(input, output) {}

shinyApp(ui, server)

However, now the space between the two buttons is too big:

enter image description here

How to make it smaller, i. e., how to control it?

Upvotes: 1

Views: 6315

Answers (2)

Pork Chop
Pork Chop

Reputation: 29387

You can also use splitLayout:

library(shiny)

ui <- fluidPage(
  fluidRow(
    align = "center",
    br(),
    column(
      12,
      splitLayout(cellWidths = c("30%", "30%"),
                  actionButton(
                    inputId = "ab1",
                    label = "Left button",
                    style = "width:400px"
                  ),
                  actionButton(
                    inputId = "ab2",
                    label = "Right button",
                    style = "width:400px"
                  )
      )
    )
  ) # fluidRow
) # fluidPage

server <- function(input, output) {}

shinyApp(ui, server)

enter image description here

Upvotes: 5

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84529

Like this, is it ok ?

ui <- fluidPage(
  fluidRow(
    align = "center",
    br(),
    column(
      6,
      actionButton(
        inputId = "ab1",
        label = "Left button",
        style = "width:400px"
      )
    ),
    column(
      6,
      actionButton(
        inputId = "ab2",
        label = "Right button",
        style = "width:400px"
      )
    )  
  ) 
) 

server <- function(input, output) {}

shinyApp(ui, server)

enter image description here

Upvotes: 1

Related Questions