Place Tab in Shiny Tabsetpanel on The Right

Place tab in Shiny tabsetPanel on the right

Using float-right should indeed work. The problem with using 2 tabsetPanel is that there are 2 active tabs at the same time.

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(
      ".tabbable ul li:nth-child(3) { float: right; }"
    ))
  ),
  tabsetPanel(
    tabPanel("tab_left1"),
    tabPanel("tab_left2"),
    tabPanel("tab_right")
  )
)

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

shinyApp(ui, server)

Aligning tabPanel to right in shiny app using css

Thanks to @thothal I was able to introduce id's to particular tabsetpanel that I wanted its tabs to float right. Full solution below. Where I wanted the 3rd tab to float right, I added the id = "chart_tabs" and used the relevant css in header.

ui <-  fluidPage(

  tags$head(
    tags$style(HTML(
      "#chart_tabs li:nth-child(3) { float: right; pointer-events: none; cursor: default;}

      "

    ))),

  navbarPage(title = NULL

    ,tabPanel(title = "Nav tab 1"
       ,tabsetPanel(type = "tabs"
          ,tabPanel(title = "Tab 1"
            ,column(
              width = 6
              ,tabsetPanel(type = "tabs"
                ,id = "chart_tabs"
                ,tabPanel(title = "Chart")
                ,tabPanel(title = "Table")
                ,tabPanel(title = "Box Title 1 #correct")
              )
            )
            ,column(
              width = 6
              ,tabsetPanel(type = "tabs"
                ,id = "chart_tabs"
                ,tabPanel(title = "Chart")
                ,tabPanel(title = "Table")
                ,tabPanel(title = "Box Title 2 #correct")
              )
            )
          )

          ,tabPanel(title = "Tab 2")
          ,tabPanel(title = "Tab 3 #I don't want this to align right")
          ,tabPanel(title = "Tab 4")
       )
    )
    ,tabPanel(title = "Nav tab 2")
    ,tabPanel(title = "Nav tab 3 - #not affected coz different class")
  )
)

server <- function(input, output) {
}

shinyApp(ui, server)

Some right-aligned tabPanels in shiny

You could do that with some css.
This would be an easy example which aligns the 4th and 5th list elements inside the class navbar-nav a float: right;.

By including right: 150px; to the 4th child, you keep the tabs in correct order.

App.R

library(shiny)   
library(shinythemes)  

ui =  tagList(
    tags$head(tags$style(HTML("
                           .navbar-nav {
                           float: none !important;
                           }
                           .navbar-nav > li:nth-child(4) {
                           float: right;
                           right: 150px;
                           }
                           .navbar-nav > li:nth-child(5) {
                           float: right;
                           }
                           "))),
  navbarPage(
    title = "My app",
    theme = shinytheme("cerulean"),
    navbarMenu("Left1",
               tabPanel("Subleft11"),
               tabPanel("Subleft12")),
    tabPanel("Left2"),
    tabPanel("Left3"),

    tabPanel("Right1"),
    tabPanel("Right2")

    )
    )

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

shinyApp(ui, server)

RStudio Shiny tabsetPanel position=right

Yes, this is unfortunate. Bootstrap 3 has removed the ability to position tabs anywhere but "above" (a lot of other people have complained about this). See this stackoverflow post for ideas of getting around this using css. Because of this, we're about to deprecate the position argument to tabsetPanel() in Shiny. Sorry :(

Shiny - updateTabsetPanel - Change the selected tab on the client

EDIT: I did not properly read your question. I've modified the code to fit your request about updating the inner tab of tab 1 to summary.

In the ui object, you can wrap an output in a actionLink and then attach a observer to the link that updates the tab using updateTabsetPanel. However, first you need a id for the whole navbarPage. I've made necessary changes to your code so that by pressing the first valueBox, you are sent to the Tab1. I've added comments where i've added lines.

library(shiny)
library(shinythemes)
library(shinydashboard)
library(shinyWidgets)

ui <- navbarPage(
  id = "tabset", # NEW ID
  theme = shinytheme("superhero"),
  title = "TabPanel",
  header = tagList(
    useShinydashboard()
  ),
  tabPanel(title = "Home",
           fluidRow(
             box(
               title = "ValuBox",
               width = 12,
               status = "info",
               solidHeader = T,
               actionLink( #WRAPPED VALUEBOX IN ACTIONLINK
                 inputId = "link1",
                 label = HTML(
                   as.character(valueBoxOutput("ibox"))
                 )
                 
               ),
               valueBoxOutput("vbox")
             )
           )
  ),
  tabPanel(title = "Tab1",
           value = "tab1", #ADDED A VALUE PARAMETER HERE
           tabsetPanel(
             id = "tab1_inner", #ADDED ID HERE
             tabPanel("Plot"),
             tabPanel("Summary"),
             tabPanel("Table")
           )),
  tabPanel(title = "Tab2",
           value = "tab2", #ADDED A VALUE PARAMETER HERE
           tabsetPanel(
             id = "tab2_inner", #ADDED ID HERE
             tabPanel("BarChart"),
             tabPanel("SummaryTable"),
             tabPanel("TableDT")
           ))
)

server <- function(input, output) {
  output$ibox <- renderValueBox({
    valueBox(
      value = "Title1",
      subtitle = "Text1",
      color = "aqua",
      icon = icon("credit-card")
    )
  })
  output$vbox <- renderValueBox({
    valueBox(
      value = "Title2",
      subtitle = "Text2",
      color = "light-blue",
      icon = icon("credit-card")
    )
  })
  
  observeEvent(input$link1, { #OBSERVER THAT CHANGES TAB WHEN LINK IS CLICKED
    updateTabsetPanel(inputId = "tabset", selected = "tab1")
    updateTabsetPanel(inputId = "tab1_inner", selected = "Summary")
  })
 
}

shinyApp(ui, server)

Adjust tabPanel in Shiny

Try this:

column(8, "",
  tabsetPanel(
    tabPanel("Output1", plotOutput("graph",width = "100%", height = "600")),
    tabPanel("Output2",uiOutput('daterange')),
    tabPanel("Output3")
    )
  )

Delay in tabPanel content update when Sidebar control is updated

Using the outputOptions to set suspendWhenHidden = FALSE updates the outputs also if they aren't visible:

library(shiny)
library(shinydashboard)

siderbar <- dashboardSidebar(
  sidebarMenu(
    # Add buttons to choose the way you want to select your data
    selectizeInput(inputId = "select_by", label = "Select by:",
                   choices= as.character(1:1000))
  )   
)

body <- dashboardBody(
  fluidRow(
    tabBox(
      side = "right",
      selected = "Tab3",
      tabPanel("Tab1", "Tab content 1", textOutput("tabset1Selected")),
      tabPanel("Tab2", "Tab content 2", textOutput("tabset2Selected")),
      tabPanel("Tab3", "Tab content 3", textOutput("tabset3Selected"))
    )
  ),
)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "tabBoxes"),
    siderbar,
    body
  ),
  server = function(input, output) {
    # The currently selected tab from the first box
    output$tabset1Selected <- output$tabset2Selected <- output$tabset3Selected <- renderText({
      input$select_by
    })
    
    lapply(list("tabset1Selected", "tabset2Selected", "tabset3Selected"), outputOptions, x = output, suspendWhenHidden = FALSE)
  }
)

Furthermore you should consider using a server-side selectizeInput to enhance the performance for many choices.

---

Related Topics