Layout issue with action buttons in wide and long formats of Shiny app

Question

I am developing shiny app to be used for PC and mobile (android). The app is being deployed to shinyapps.io. So i have met the layout issue with action buttons using wide and long format in a mobile phone:

1. Wide format:

2. Long format:

I would like to have action button layout in the long format the same as in the wide one. I have found no similar issues and dont have much experience in web developmnet.

So i would be glad to be given a hint how to deal with the issue. My test Shiny app is as follows:

library(shiny)
ui <- fluidPage(
                 br()
                ,fluidRow( column(1, actionButton("back", "BACK"))
                          ,column(1, actionButton("forward", "FORWARD"))
                          )
              )
server <- function(input, output) {
      print("test button layout")    
}
shinyApp(ui = ui, server = server)

Answer 1

You may need to play around with css to achieve this

library(shiny)

ui <- fluidPage(
  br(),
  fluidRow(
    div(style="display: inline-block;vertical-align:top;",column(1, actionButton("back", "BACK"))),
    div(style="display: inline-block;vertical-align:top;",column(1, actionButton("forward", "FORWARD")))
  )
)
server <- function(input, output) {
  print("test button layout")    
}
shinyApp(ui = ui, server = server)