8

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!

1
  • I just tried it out, and I get a scrollbar on the right of the app, not below
    – alexwhan
    Oct 1, 2013 at 2:58

4 Answers 4

19

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")
3
  • 3
    I found this answer quite helpful. I also wanted to point out the handy discussion over on google groups: goo.gl/L8vuOf Nov 13, 2013 at 23:45
  • 1
    Can I just follow on that question and ask how to adjust height?
    – Konrad
    Mar 26, 2015 at 13:33
  • I realise that this answer was from long ago. I just tried it and it didn't work for me. @ChriiSchee's answer below worked well.
    – Adrian
    Apr 7, 2016 at 14:27
12

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

1
  • this will transfer the style down to the next element inside which the tabsetpanel is placed I believe. In my case the tabsetpanel was inside a column with it's own style = 'width: 255px; etc' and resulted in a style error. When inspecting the element the column should warning: height:400px width:255px, without the needed ; to separate them, and clearly the height for the panel moves to the wrapping column. So you do need div
    – Mark
    Apr 26, 2019 at 17:40
2

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.