Shiny: How to adjust the width of the tabsetPanel? - r

Question

Here is my app embedded in my site. I want to get rid of the scroll widget below my app, this is due to the width of the tabsetPanel.
I embed the app using this code:
<iframe width="800" height="480" frameborder="0" src="http://spark.rstudio.com/alstated/meanvar/"></iframe>
App Codes:
ui.R
library(shiny)
# Define UI for application that plots random distributions
shinyUI(pageWithSidebar(
headerPanel(title = ""),
sidebarPanel(
sliderInput("size",
"Number of Observations",
min = 10,
max = 200,
value = 95),
sliderInput("mu",
"Mean",
min = -100,
max = 100,
value = 0),
sliderInput("sd",
"Standard Deviation",
min = 1,
max = 6,
value = 3),
checkboxInput(inputId = "indiv_obs",
label = "Show individual observations",
value = FALSE),
checkboxInput(inputId = "density",
label = "Show density estimate",
value = FALSE),
conditionalPanel(condition = "input.density == true",
sliderInput(inputId = "bw_adjust",
label = "Bandwidth Adjustment",
min = 0.2,
max = 2,
value = 1,
step = 0.2))
),
mainPanel(
tabsetPanel(
tabPanel("Plot",
plotOutput(
outputId = "histogram",
height = "400px",
width = "400px")),
tabPanel("Summary",
verbatimTextOutput(outputId = "datsummary"))
))
)
)
server.R
library(shiny)
# Define server logic required to generate and plot a random distribution
shinyServer(function(input, output) {
data <- reactive(rnorm(
n = input$size,
mean = input$mu,
sd = input$sd
))
output$histogram <- renderPlot({
hist(data(),
probability = TRUE,
xlab = "Data",
ylab = "Density",
main = "Histogram of Random Samples")
if(input$indiv_obs){
rug(data())
}
if(input$density){
dens <- density(data(), adjust = input$bw_adjust)
lines(dens, col = "blue")
}
})
output$datsummary <- renderPrint(summary(data()))
})
Any help is greatly appreciated!

Answer 1

I figure it now, I inspect the html code of the app on Shiny Homepage. And the tabsetPanel is adjusted using the <div> (Document Division) tag in html by setting the option class to either span1, span2, span3 and so on. The higher the suffix of the span the larger the width of the division. And I just add div() tag in my ui.R code:
div(
tabsetPanel(
tabPanel("Plot",
plotOutput(
outputId = "histogram",
height = "400px",
width = "400px")),
tabPanel("Summary",
verbatimTextOutput(outputId = "datsummary"))
), class = "span7")

Answer 2

Another way to adjust width (and height):
add
), style='width: 1000px; height: 1000px' # end of tabsetPanel
after tabsetPanel, no need for div() in this case

Answer 3

The examples above work in certain circumstances. I needed a more general solution. The following solution can be tailored to any situation. For example, your Shiny app could still be responsive.
My solution
First, create a div before the tabsetPanel and give it a class. Second, write a piece of jQuery/javascript to find the parent element of that div. Third, change the class of this parent element using javascript/jQuery. You can change the class into anything you like, for example, col-sm-12, col-sm-11, some other standard Bootstrap class or you can add and create your own class. Fourth, add the custom jQuery/javascript to your Shiny application (make sure that you save the .js-file in the www folder of your Shiny app).
Here is my example:
Javascript/jQuery (general.js):
$(function (){
$("div.delParentClass").parent().removeClass("col-sm-8").addClass("col-sm-12");
/* In addClass you can specify the class of the div that you want. In this example,
I make use of a standard Bootstrap class to change the width of the tabset: col-sm-12.
If you want the tabset to be smaller use: col-sm-11, col-sm-10, ... or add
and create your own class. */
});
Shiny UI
mainPanel(
tags$head(tags$script(src="general.js")),
div(class="delParentClass",
tabsetPanel(
tabPanel("Some panel", .....),
tabPanel("Some panel", .....),
tabPanel("Some panel", .....)
)
)
)

Answer 4

A different way to adjust the width of sidebarPanel and tabsetPanel was based on modifying the width property of the col-sm-4 and col-sm-8 CSS classes, respectively.
Using tag$head and tag$style it is possibile to add CSS directly to the Shiny UI.
See https://shiny.rstudio.com/articles/css.html for details.
This is not an elegant solution, but it works correctly.
Shiny UI
shinyUI(fluidPage(
tags$head(
tags$style(HTML("
.col-sm-4 { width: 25%;}
.col-sm-8 { width: 75%;}
"))
),
headerPanel(title = ""),
sidebarPanel(
sliderInput("size",
"Number of Observations",
min = 10,
max = 200,
value = 95),
sliderInput("mu",
"Mean",
min = -100,
max = 100,
value = 0),
sliderInput("sd",
"Standard Deviation",
min = 1,
max = 6,
value = 3),
checkboxInput(inputId = "indiv_obs",
label = "Show individual observations",
value = FALSE),
checkboxInput(inputId = "density",
label = "Show density estimate",
value = FALSE),
conditionalPanel(condition = "input.density == true",
sliderInput(inputId = "bw_adjust",
label = "Bandwidth Adjustment",
min = 0.2,
max = 2,
value = 1,
step = 0.2))
),
mainPanel(
tabsetPanel(
tabPanel("Plot",
plotOutput(
outputId = "histogram",
height = "400px",
width = "400px")),
tabPanel("Summary",
verbatimTextOutput(outputId = "datsummary"))
))
)
)