Shiny dashboard margin between boxes

Question

How can I decrease the space between boxes in Shiny dashboard?

I have tried the following:

.box-body{
    margin: 0 !important;
    padding: 0 !important;}

But that seems to add a margin towards the inside of the box. What I want is to reduce the space between boxes such that these boxes are basically touching each other.

Hello there, what you are looking for is to reduce the padding :) — Kanstantsin Arlouski, Jul 18 '17 at 20:34
If you post the link to the site, I would be able to assist you with this in much more detail — Kanstantsin Arlouski, Jul 18 '17 at 20:43
@Rashid you are right about the semicolon (just edited it in the question), but that doesn't fix the problem. — Camila Vargas Restrepo, Jul 19 '17 at 14:38
@KanstantsinArlouski I have tried margin and padding. The .box-body seems to modify a div inside the box, not the box itself. I don't have the dashboard on a server, but it's a straightforward shiny dashboard https://rstudio.github.io/shinydashboard/structure.html#body — Camila Vargas Restrepo, Jul 19 '17 at 14:39

score 4 · Answer 1 · answered Jul 19 '17 at 17:38

4

Use only this CSS:

[class*="col-lg-"],[class*="col-md-"],
[class*="col-sm-"],[class*="col-xs-"]{
    padding-right:0 !important;
    padding-left:0 !important;
}

answered Jul 19 '17 at 17:38

Rashid

272
2
6

Kanstantsin Arlouski · Answer 2 · 2017-07-21T19:48:59.150

2

Here are the css properties that cause your boxes to be separated the way the are. The col classes are found in bootstrap.css and .box can be found in AdminLTE.min.css.

.box { margin-bottom: 0; } 

[class*="col-lg-"],[class*="col-md-"],
[class*="col-sm-"],[class*="col-xs-"]{
  padding-right:0 !important;
  padding-left:0 !important;
}

edited Jul 21 '17 at 19:48

answered Jul 19 '17 at 14:59

Kanstantsin Arlouski

720
6
18

Shiny dashboard margin between boxes

2 Answers2