9

I would appreciate some css help here.
What I am trying to achieve is the following layout.

enter image description here

I can easily get to the layout without the right sidebar:

---
title: "Title"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
    orientation: rows
    css: styles.css
runtime: shiny
---

Page 1 {data-orientation=rows}
=====================================

Row {.sidebar}
-----------------------------------------------------------------------
### Inputs 1

Row 
-----------------------------------------------------------------------

### Chart 1

### Chart 2
Row 
-----------------------------------------------------------------------

### Chart 3
Row 
-----------------------------------------------------------------------

### Chart 4

### Chart 5

I tried to add a css class to add the rigth sidebar but to no avail.

Any help will be appreciated.

Thanks.

deann
  • 756
  • 9
  • 24
  • I implemented this using shiny – deann Jan 03 '19 at 18:22
  • 3
    This is not what you are asking for but if you can't find a solution you might want to check [shinydashboardPlus](https://rinterface.github.io/shinydashboardPlus/) which provides a left and a `rightSidebarMenu()` by default. Please see [this](https://stackoverflow.com/questions/58756854/right-sidebar-open-by-default-in-shinydashboardplus/58762610#58762610) for an example. – ismirsehregal Apr 17 '20 at 05:48
  • Is this a one page fixed layout or a user can scroll down? –  Apr 17 '20 at 22:37
  • @PeterDarmis The way I implemented it, sidebars are fixed, whilst the charts are scrollable, as you can not size them one in one screen – deann Apr 18 '20 at 08:45
  • @deann my answer below is working!!!! give it a green tick community members will get help!!! and possibly an upvote!!! – Nikhil S Apr 28 '20 at 12:06
  • @nikhilsugandh someone else put a bounty on the question, so I havent looked at your answer. I solved it more than 1 year ago by using shiny. Also, your answer is not complete .. showing how to use your code with flexdashboard. – deann Apr 28 '20 at 13:43

3 Answers3

1

I think the grid layout will be good for your situation.

/* container */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* sidebar */
.sidebar {
  background-color: #729fcf;
  grid-row-start: 1;
  grid-row-end: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar:first-of-type {
  grid-column-start: 1;
}

.sidebar:last-of-type {
  grid-column-start: 4;
}

.sidebar:first-of-type > span {
  transform: rotate(-90deg);
}

.sidebar:last-of-type > span {
  transform: rotate(90deg);
}

/* charts */
[class^="chart"] {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  border: 1px solid lightgrey;
}

[class^="chart"]:not(.chart-3) {
  background-color: #76ec9b;
}

.chart-3 {
  background-color: #ee6264;
  grid-column-start: 2;
  grid-column-end: 4;
}

.chart-1,
.chart-4 {
  margin-right: 0.1rem;
}

.chart-2,
.chart-5 {
  margin-left: 0.1rem;
}
<section class="container">
  <aside class="sidebar"><span>Inputs for charts 1 and 4</span></aside>
  <div class="chart-1">Chart 1</div>
  <div class="chart-2">Chart 2</div>
  <div class="chart-3">Chart 3</div>
  <div class="chart-4">Chart 4</div>
  <div class="chart-5">Chart 5</div>
  <aside class="sidebar"><span>Inputs for charts 2 and 5</span></aside>
</section>
Abdelrhman Arnos
  • 1,404
  • 3
  • 11
  • 22
0

I can offer a general solution. I recommend altering an existing theme, such as 'lumen' so that it results in the layout you wish to have. You could use Griffon or similar HTML editor to accomplish this. Then, refer to the lumen theme when rendering in Rmarkdown. See my related answer here.

Ben
  • 1,113
  • 10
  • 26
  • I guess the same behaviour could be achieved by adding a css file as well... however I am not sure which classes should be overriden as I am not proficient in css – deann Dec 17 '18 at 15:09
0

This is it :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>

<body>
    <div class="container">
        <div class="row" style="background-color: rgb(115, 115, 223); height: 300px; width: 600px; ">
            <div class="col-2 ">
                One of three columns
            </div>
            <div class="col-8">
                <div class="container">
                    <div class="row" style="background-color: lightgreen; height: 100px;">
                        <div class="col" style="border: 5px solid white;">
                            chart1
                        </div>
                        <div class="col" style="border: 5px solid white;">
                            chart2
                        </div>
                    </div>
                    <div class="row" style="background-color:rgb(221, 96, 96); height: 100px;">
                        <div class="col" style="border: 5px solid white;">
                            chart3
                        </div>
                    </div>

                    <div class="row" style="background-color: lightgreen; height: 100px;">
                        <div class="col" style="border: 5px solid white;">
                            chart4
                        </div>
                        <div class="col" style="border: 5px solid white;">
                            chart5
                        </div>

                    </div>

                </div>
            </div>
            <div class="col-2" style="rgb(115, 115, 223);;  height: 300px; ">
                One of three columns
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>

</html>

see : https://jsfiddle.net/sugandhnikhil/86fojbdz/

CSS would be much longer to write ,use Bootstrap Instead!!!!!!

Thanks!!!!

:-)

Nikhil S
  • 3,786
  • 4
  • 18
  • 32