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

Ever find a solution to this?? – theforestecologist Apr 18 '17 at 22:38 — theforestecologist, Apr 18 '17 at 22:38

Rasmus Larsen · Answer 1 · 2020-02-24T08:11:53.643

63

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.

edited Feb 24 '20 at 08:11

answered Oct 04 '17 at 12:32

Rasmus Larsen

5,721
8
47
79

3

This **only works if I add the ` !important` rule to the `max-width` definition** as proposed in [this answer](https://stackoverflow.com/a/38373846/7196903). But using that rule [seems bad practice](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception), so is there another way? – Salim B Nov 02 '17 at 16:33
2

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. – Rasmus Larsen Nov 02 '17 at 19:02
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. – Salim B Nov 02 '17 at 20:08
You need to put this below the first chunk, not at the top of the rmarkdown document – Rafael Zayas May 02 '18 at 19:55
8

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. – Marek Sep 06 '18 at 10:01
this is great. Another thing is to wrap this stylistic into a div so that certain chunks width can be customize. – Ahdee Jan 19 '20 at 19:40
I needed to use the results from this page [Override rmarkdown theme in order to change html page width](https://stackoverflow.com/questions/38367392/override-rmarkdown-theme-in-order-to-change-html-page-width/38373846#38373846) to get it to work for me. I needed to put the style in a `css` code chunk. – steveb Feb 25 '20 at 23:51

score 6 · Answer 2 · answered Sep 25 '21 at 19:23

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

score 4 · Answer 3 · answered Jan 24 '22 at 22:06

4

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>

answered Jan 24 '22 at 22:06

VitoshKa

8,387
3
35
59

score -3 · Answer 4 · edited Jan 19 '17 at 16:33

-3

As explained here, you need to use this code:

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

edited Jan 19 '17 at 16:33

Donald Duck

8,409
22
75
99

answered Jan 19 '17 at 15:35

Aurélien Brionne

1
1

Increase width of entire HTML Rmarkdown output

4 Answers4

Linked