How to reduce shiny interactive rmarkdown margins?

Tags: html,css,r,shiny,rmarkdown

Problem :

Is there any way to reduce the right and left margins when shiny-server sees an .Rmd file instead of ui.R and server.R? As you can see below, nearly half of the window is right and left margins. Is there a way to modify an internal css script to make the change or is there a more simple solution by adding an geometry option in the markdown header?

enter image description here

Here is the sample code generated when I create a new Shiny Rmarkdown file in Rstudio:

title: "Untitled"
author: "Me"
date: "10/13/2015"
output: html_document
runtime: shiny

This R Markdown document is made interactive using Shiny. Unlike the more traditional workflow of creating static reports, you can now create documents that allow your readers to change the assumptions underlying your analysis and see the results immediately. 

To learn more, see [Interative Documents](

## Inputs and Outputs

You can embed Shiny inputs and outputs in your document. Outputs are automatically updated whenever inputs change.  This demonstrates how a standard R plot can be made interactive by wrapping it in the Shiny `renderPlot` function. The `selectInput` and `sliderInput` functions create the input widgets used to drive the plot.

```{r, echo=FALSE}
  selectInput("n_breaks", label = "Number of bins:",
              choices = c(10, 20, 35, 50), selected = 20),

  sliderInput("bw_adjust", label = "Bandwidth adjustment:",
              min = 0.2, max = 2, value = 1, step = 0.2)

  hist(faithful$eruptions, probability = TRUE, breaks = as.numeric(input$n_breaks),
       xlab = "Duration (minutes)", main = "Geyser eruption duration")

  dens <- density(faithful$eruptions, adjust = input$bw_adjust)
  lines(dens, col = "blue")

## Embedded Application

It's also possible to embed an entire Shiny application within an R Markdown document using the `shinyAppDir` function. This example embeds a Shiny application located in another directory:

```{r, echo=FALSE}
  system.file("examples/06_tabsets", package="shiny"),
    width="100%", height=550

Note the use of the `height` parameter to determine how much vertical space the embedded application should occupy.

You can also use the `shinyApp` function to define an application inline rather then in an external directory.

In all of R code chunks above the `echo = FALSE` attribute is used. This is to prevent the R code within the chunk from rendering in the document alongside the Shiny components.

Solution :

After looking at the HTML produced by an Rmd file, it looks like the main content is under a div with class main-content and it has a max-width property. Looking at the rmarkdown source code, I believe that perhaps this happens here. Try adding a css rule like div.main-container { max-width: inherit; }

    CSS Howto..

    How to dynamically change CSS style attribute of DIV tag?

    How to center my hmenu (no matter the resolution)?

    How to get a reference to id=“xxx.yyy” in CSS?

    Show Div When Click Link Button

    how to setup capybara-webkit to test ajax calls and get screenshots(html with css and javascript loaded)

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    How to fill Frameless grid dynamically?

    how can I hide empty cells in a table with bootstrap 3

    How do I minify CSS and Javascript? [duplicate]

    How to center my

    text using css?

    How can I add my custom style for my bootstrap navbar?

    How to properly apply CSS style to H elements in ordered list

    Using CSS, how can I make my document expand to the user's viewport if the content doesn't scroll?

    How to change menu icon when scrolling to specific sections of the website?

    how to apply css to extjs grid emptytext?

    how to make form input in middle

    how could I make a textarea dynamically resize with the chrome app window?

    How to quickly find a CSS class when there are multiple stylesheets

    CSS - How to add a glow effect around a fluid box?

    How to automatically resize a div based on background image size?

    bootstrap select show only dropdown-menu on link click without the select button

    How to remove right border

    How to modify this JQuery CSS into my view?

    GWT how to add css style on Image Resource

    How can have all the images show up on my slider whilst differentiating each image with its own div tag?

    How to apply focus css for all drop downs?

    How to fix layout to browser window without scroll

    Reposition and show live results upwards

    how to apply css to a specific element of a table?

    jqueryUI custom button not showing up