Shiny: How to adjust the width of the tabsetPanel?

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

Answer 1

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", .....)
        )
    )
)