0

I decided to use markdown with flexdashboard package for generating a dynamic dashboard.

The dashboard is well designed out of the box thanks to the people who wrote it , BUT I would like to set a sidebar to the right side of the screen (not to the left as given by default).

I have read the documentation flexdashboard's sidebar and googled quite a lot but couldn't find a way how to customize it from the markdown file (Rmd).

Eventually decided to modify bunch of CSS files, and move those html elements.

.section.sidebar {
  top: 61px;
  border-bottom: 10px solid #ececec;
  border-left: 10px solid #ececec;
  background-color: rgba(255, 255, 255, 1);
  left:1080px;
}

but it seems I have taken the wrong path (CSS tweaking is a headache for me), Can someone suggest a better approach cause I'm kinda lost here?

for demonstration purposes I drew a small sketch:

my illustration

Thank you in advance, Gil

Brian
  • 3,850
  • 3
  • 21
  • 37
JammingThebBits
  • 732
  • 11
  • 31
  • maybe float:right? – Maciej Wojcik Aug 25 '16 at 20:06
  • I tried it but seems it stills fails (still on the left side), that's the reason I manually configured left:1080px; but now the right region is getting covered :/ . thank you for trying to assist! p.s maybe it something to do with flexbox – JammingThebBits Aug 25 '16 at 20:12

1 Answers1

0

You have to add this CSS code to parent class:

.container {
  justify-content: flex-end;
}
Maciej Wojcik
  • 2,115
  • 2
  • 28
  • 47
  • I have tried your suggestion, but the sidebar didn't move. according to firebug inspector tool the parent class is: shiny-html-output shiny-bound-output, so have added the "justify-content: flex-end;" to the relevant place (I hope so), but unfortunately it didn't work. I have pasted my original generated html I'm working on to jsfiddle: https://jsfiddle.net/Gilco333/kujf7p6b/#&togetherjs=KliUwaFtbr. can you please take a look? thank you. – JammingThebBits Aug 27 '16 at 15:54