Two sidebars in flexdashboard layout

user_7424716 0
Viewed 1225

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.

flexdashboard shinydashboard shiny r css
3 Answers

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>

user_110543560

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.

user_41657350

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

:-)

user_62856000
Related