Aligning tabPanel to right in shiny app using css

Question

Summary:

I am trying to replicate tabBox from shinydashboard but without loading shinydashboard. I have done this using tabsetPanel and tabPanel. I want to float 3rd tab to the right (for titles) every time I set one of the tabsetPanel, however there are occasions where I don't want this to happen. I feel I might need to introduce some sort of custom ID or class in CSS so that I have control which tabsets should all float left.

What I have tried so far:

I have used the following solutions:

This solution floats right 3rd tabs found in ALL tabsets in the dashboard. It will be good if I can specify
This solution is promising however the tab space is now split because of the 2 tabsetPanels.

library(shiny)

ui <-  fluidPage(

  tags$head(
    tags$style(HTML(
      ".nav-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"
                                          ,tabPanel(title = "Chart")
                                          ,tabPanel(title = "Table")
                                          ,tabPanel(title = "Box Title 1 #correct")
                                       )
                                     )
                                     ,column(
                                       width = 6
                                       ,tabsetPanel(type = "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)

The code I have included here incorporates solution #1 from the link above. As you can see by using css ".nav-tabs li:nth-child(3)" this is applied globally. Is there a way I can keep this CSS but use class or ID or data-value = "Nav tab 1" so I can apply float left css selectively? TIA

thothal thothal · Accepted Answer · 2019-09-20T08:23:31

One possibility is to dynamically add/remove a class to your tabset element and adapt your css. You need to add an id to your tabset to be able to address it via javascript. You have to execute some javascript code, the easiest is by means of library(shinyjs).

In the following example I toggle the class on an actionButton click, but you can adapt that according to your needs.

library(shiny)
library(shinyjs)

style <- ".float-right li:nth-child(2) { float: right;}"

ui <- fluidPage(
  useShinyjs(),
  tags$head(tags$style(HTML(style))),
  navbarPage(title = "Move Me",
             tabPanel("Nav Tab 1",
                      tabsetPanel(type = "tabs", id = "moveme",
                                  tabPanel(title = "Tab 1", 
                                           actionButton("move", "Move Tab2")),
                                  tabPanel(title = "Tab 2")
                      )
             ),
             tabPanel("Nav Tab 2")
  )
)

server <- function(input, output) {
  observeEvent(input$move, {
    toggleCssClass("moveme", "float-right")
  }, ignoreInit = TRUE)
}

shinyApp(ui, server)

Aligning tabPanel to right in shiny app using css

Summary:

What I have tried so far:

2 Answers