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
)
)
)
)
)
)
)
)
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)
Hi @scottyd22 , thank you for providing this solution. I do have a follow up questions:
-
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?
-
Also, if I would like add background color to these tabs (Tab 1, Tab 2) can we do that with this implementation?
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)
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.
Try adding one more piece of CSS within tags$style.
.tab-pane {
background-color: white;
}
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
You can specify the width in the latest CSS addition.
.tab-pane {
background-color: white;
width: 100%;
}
Thank you @scottyd22 . This resolved the issue for me.
I am struggling with another issue: Custom background using renderdata
Can you please help?
