CODEWITHSUNDEEP
rr-markdownflexdashboard
Probel
Probel

Reputation: 195

R markdown flexdashboard text margins

How is it possible to create nice margins for text in a rmarkdown flexdashboard document? Their manual site is created using flexdashboard and the text nicely spans a readable area in the middle and doesn't reach the sides of the screen. The margins adjust nicely to browser window width. I haven't been able to reproduce this behaviour, despite multiple attempts specifying {data-width} and {data-padding}. My text always spans from side to side which doesn't look good in a wide browser window. Example Rmd file:

---
title: "Text width problem"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

I'd like this text to have margins on the sides. I'd like this text to have 
margins on the sides. I'd like this text to have margins on the sides. I'd 
like this text to have margins on the sides. I'd like this text to have 
margins on the sides. I'd like this text to have margins on the sides. I'd 
like this text to have margins on the sides. I'd like this text to have 
margins on the sides. I'd like this text to have margins on the sides. I'd 
like this text to have margins on the sides. I'd like this text to have 
margins on the sides. I'd like this text to have margins on the sides. I'd 
like this text to have margins on the sides. I'd like this text to have 
margins on the sides.

Upvotes: 1

Views: 1698

Answers (1)

Martin Schmelzer
Martin Schmelzer

Reputation: 23889

By styling your document using CSS. Here we shrink the whole body of the document.

---
title: "Text width problem"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

<style>
body {
  padding: 0px 200px 0px 200px;
}
</style>


This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides. This text has margins on the sides.

enter image description here

An alternative would be to wrap a div container around your text with a certain ID like

<div id="myText">
....
</div>

and modify that

<style>
#myText {
  width: 300px;
  margin: auto;
}
</style>

Upvotes: 3

Related Questions