How to increase the Tab size in a RShiny UI

[rupamjogal]

Hi, I am trying to increase the size of the tabs in my shiny application but cannot seem to find a way. I am attaching a screenshot below for reference. It is stuck to the left corner of the UI with the code below and I want it to be of a bigger size and cover space which is available on the right hand side

    tabPanel(
    sidebarPanel(
    mainPanel(
      fluidRow(
        tabsetPanel(
          tabPanel(
            'Tab 1',
                fluidRow(
                  column(
                    height = 12,
                    width = 12
                  )
                )#fluidRow ends
          ),#tabPanel ends
          tabPanel(
            'Tab 2',
            fluidRow(
              column(
                height = 12,
                width = 12
              )
            )
          )
        )
      )
    )
  )
)

[scottyd22]

This can be achieved by incorporating some CSS. Add the tags$style() at the top of your UI section. I could not get your specific code to work, so I put together a sample app. Adjust the widths to achieve your desired outcome. In my example, the first tab is 150px and the second is 250px.

library(shiny)

ui = fluidPage(
  
  tags$style(
  'ul li:nth-child(1) {
  width: 150px;
  }
  
  ul li:nth-child(2) {
  width: 250px;
  }
  '),
  
 tabsetPanel(
   tabPanel(
     'Tab 1',
     fluidRow(
       column(
         height = 12,
         width = 12
       )
     )#fluidRow ends
   ),#tabPanel ends
   tabPanel(
     'Tab 2',
     fluidRow(
       column(
         height = 12,
         width = 12
       )))
 )
) 
 
server = function(input, output, session) {}

shinyApp(ui = ui, server = server)

[rupamjogal]

Hi @scottyd22 , thank you for providing this solution. I do have a follow up questions:

1. This does increase the tab width but it also impacts the main UI tabs width. So, the application I have has multiple tabs (5 total tabs) and within one of those tabs there are 2 tabs (Tab 1,Tab 2) but when I embed this code as we have in this example it also increases the width of the main tabs (First 2 tabs that is). Is there a way to avoid this from happening?

2. Also, if I would like add background color to these tabs (Tab 1, Tab 2) can we do that with this implementation?

[scottyd22]

Yes, there is a way to avoid this. I did not realize there were tabs within tabs. Background color can also be added. The example below was updated to include five main tabs and two tabs within main tab #3. The CSS was altered to utilize data-value, which corresponds to the tab names. Thus, you can alter the format of specific tabs. Background color can be changed by specifying background-color:. Note, when a tab is selected, the background remains or changes to white.

library(shiny)

ui = fluidPage(
  tags$style(
  '[data-value = "Tab 1"] {
  width: 150px;
  background-color: salmon;
  }
  
  [data-value = "Tab 2"] {
  width: 250px;
  background-color: lightblue;
  }
  
  [data-value = "Main 5"] {
  width: 300px;
  background-color: goldenrod;
  }'),
  
 tabsetPanel(
   tabPanel('Main 1'),
   tabPanel('Main 2'),
   tabPanel('Main 3',
            br(),
            tabsetPanel(
              tabPanel(
                'Tab 1',
                fluidRow(
                  column(height = 12,
                         width = 12
                  ))),
              tabPanel(
                'Tab 2',
                fluidRow(
                  column(height = 12,
                         width = 12
                  )))
            )),
   tabPanel('Main 4'),
   tabPanel('Main 5')
   )
 )
 
server = function(input, output, session) {}

shinyApp(ui = ui, server = server)

[rupamjogal]

Thank you @scottyd22 this seems to work now. However, I see the text below these tabs (1,2) has the color of unselected tab. Is there a way to get rid of this?

Example: If I select Tab 1 it's background is white but the text below it has the color of Tab 2 in this case lightblue and vice versa.

[scottyd22]

Try adding one more piece of CSS within tags$style.

.tab-pane {
  background-color: white;
  }

[rupamjogal]

Thank you @scottyd22, this fixed the issue now.
The tab size (250px) defines the content size below these tabs as well?
I have a table displayed below Tab 1 and that initially had full width of the screen with the similar column setting I have height = 12, width = 12. But now I see the table as shrinked to the size of Tab 1: 250px

[scottyd22]

You can specify the width in the latest CSS addition.

.tab-pane {
  background-color: white;
  width: 100%;
  }

[rupamjogal]

Thank you @scottyd22 . This resolved the issue for me.

I am struggling with another issue: Custom background using renderdata

Can you please help?