5

I am building a shiny app where there will be a tabsetPanel with three tabs (tab1, tab2, and tab3). I will have two actionButtons that will apply to all of the tabs but I don't want the actionButton inside the tabs, I would like for them to be to the far right of the tabs so now matter what tab you are in, you can see the actionButtons always. Here is some code for what I am talking about:

tabsetPanel(
        
        tabPanel(
           title = "Tab1"
        )

        tabPanel(
           title = "Tab2"
        )

        tabPanel(
           title = "Tab3"
        )
)

And so I want these two action buttons to the far right of the tabs but outside of the tabsetPanel.

actionButton('load_inputs', 'Load inputs')
actionButton('save_inputs', 'Save inputs')

It would be nice if there is a way to just within the actionButton() function specify where you want the buttons to appear.

emr2
  • 1,436
  • 7
  • 23
RustyStatistician
  • 989
  • 3
  • 14
  • 25

1 Answers1

6

You can define the location of any element using CSS. You could add the style for each button by adding the attribute style: actionButton(style= "..."). Also you could create a .css file with your custom styles. But for this case you could just set style to a div where the buttons are.

Below it is a basic example of adding two buttons to the right corner of the tabsetPanel. 

library(shiny)

ui <- fluidPage(
  titlePanel("Tabsets"),
  div(style = "position:absolute;right:1em;", 
    actionButton('load_inputs', 'Load inputs'),
    actionButton('save_inputs', 'Save inputs')
  ),
  tabsetPanel(
    tabPanel("Tab1", h2("Content 1")), 
    tabPanel("Tab2", h2("Content 2")), 
    tabPanel("Tab3", h2("Content 3"))
  )
)

server <- function(input, output, session) {
}
runApp(list(ui = ui, server = server))
Geovany
  • 5,389
  • 21
  • 37