Increase width of entire HTML Rmarkdown output

Question

I am looking to increase the overall width of my HTML Rmarkdown output.

When producing PDF documents from Rmarkdowns there is an option to set the margin in the YAML section of the Rmd (ex. geometry: margin=.5in).

I am looking for something similar for HTML docs. The following link is a good example of my issue: https://rstudio.github.io/DT/extensions.html

As you can see on that html webpage, there is a lot of white space to the left and right of the datatables. Is there a way to reduce this margin space and thus increase the width of the datatables?

Thanks

Pontianak

Ever find a solution to this?? – Dogma

Answer 1

Put this at the top (but below the YAML) of your rmarkdown document:

<style type="text/css">
.main-container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}
</style>

Don't put it in a chunk but as plain text. It should set the max-width of the content area to 1800px.

Pekoe

This only works if I add the ` !important` rule to the max-width definition as proposed in this answer. But using that rule seems bad practice, so is there another way? – Athirst

It works on my machine without adding anything else. Tested in Chrome, Explorer and Edge, it works in all of them. Using rmarkdown 1.6 and R 3.4.2. – Pekoe

Nope, doesn't work for me, neither in FF 56 nor Chromium 62. Also using rmarkdown 1.6 and R 3.4.2. It doesn't even work if I directly change the original CSS rule in the HTML file from 940px to 1800px – unless I add !important to it. – Athirst

You need to put this below the first chunk, not at the top of the rmarkdown document – Burgoo

It worked for me if I changed .main-container to div.main-container. There was already this kind definition so I suppose it was overrided. – Embody

this is great. Another thing is to wrap this stylistic into a div so that certain chunks width can be customize. – Panettone

I needed to use the results from this page Override rmarkdown theme in order to change html page width to get it to work for me. I needed to put the style in a css code chunk. – Andalusia

Answer 2

Something else inserts max-width into the html output, so you need to mark the width !important for it to work

<style type="text/css">
.main-container {
  max-width: 100% !important;
  margin: auto;
}
</style>

Ramonaramonda

This is the only working solution I have found. Running R version 4.2.2 with rmarkdown_2.15. Thank you! – Brote

Answer 3

As of rmarkdown 2.10, did get no results with the solutions proposed here or on the linked answer. I could not get it to work with inline css in the .rmd file. It did however work immediately when adding a doc.css file in the .rmd folder with just this entry:

div.main-container {
  max-width: 1600px !important;
}

and adding it to the yaml header like this:

---
title: asd
author: abc
date: "`r format(Sys.time(), '%d %B, %Y')`"
output:
  html_document:
    toc: true
    toc_float: true
    toc_depth: 6
    mathjax: null
    css: doc.css
---

Jacintha

Answer 4

As explained here, you need to use this code:

datatable(..., options = list(autoWidth = TRUE,columnDefs = list(list(width = '200px', targets = c(1, 3)))))

Biggin