Link to home
Start Free TrialLog in
Avatar of TaSchm
TaSchm

asked on

CSS media query change not working in shinydashboard

Preface: Even though I'm giving a lot of webapp information, I think this is strictly a CSS media query problem.

I'm having a problem with a media query change in my custom.css file using the R shinydashboard. I'm trying to adjust the width of the side panel and then make all the subsequent appropriate changes. An example webapp can be seen here. The starting point is and involves four CSS changes to my custom sytlesheet:

    <body...>
      <header...>   
      <div class="wrapper row-offcanvas row-offcanvas-left">
        <aside class="left-side sidebar-offcanvas">

Open in new window


Step 1

When the width of the browser is 768px or greater I increase the width of the sidebar from 220px to 240px (works):

    .left-side {
        width: 240px;
    }

Open in new window


Step 2

Because the sidebar is now protrudes 20px when collapsed, I change the media query from 220px to 240px as well (wont't change to 220px):

    @media screen and (min-width: 768px)
    .left-side.collapse-left {
        left: -240px;
    }

Open in new window


Step 3

Sidebar now needs to be shifted left so right edge of sidebar is not sticking out for browser width of 768px or less (wont't change to 220px):

    @media screen and (max-width: 768px)
    .row-offcanvas-left .sidebar-offcanvas {
        left: -240px;
    }

Open in new window


Step 4

Last change shifts sidebar right so it is not off left side of screen when collapsed (won't change to 220px):

    @media screen and (max-width: 768px)
    .row-offcanvas-left.active {
        left: 240px;
    }

Open in new window



Other Notes

I can change it without the media query, but then the media query does not activate for different browser widths:

    .left-side.collapse-left {
        left: -240px;
    }

Open in new window


It seems that I can make the changes in AdminLTE.min.css to @media, but obviously not the approach I want to take.
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

First of all, I think part of your issue could be css files not loading
User generated imageMore importantly, the web app uses bootstrap http://getbootstrap.com/ If you click on the css information you can see how the media queries are set up.  You access the media queries by classes such as .col-sm-6 .col-med-4.

Everything is color by numbers using 12 columns.  If you try and customize something in the css, make sure to understand the implications.  If you can stick with using the 12 columns you would make it much easier for yourself.  

If you want something to be full width for the phone and half screen for ipad and narrower for everything else you would do something like below.
<div class="row">
     <div class="xs-col-12 sm-col-6 md-col-3">1 col phone, 2 columns ipad, 4 columns everything bigger</div>
  <div class="xs-col-12 sm-col-6 md-col-3">1 col phone, 2 columns ipad, 4 columns everything bigger</div>
  <div class="xs-col-12 sm-col-6 md-col-3">1 col phone, 2 columns ipad, 4 columns everything bigger</div>
  <div class="xs-col-12 sm-col-6 md-col-3">1 col phone, 2 columns ipad, 4 columns everything bigger</div>
</div>

Open in new window

Avatar of TaSchm
TaSchm

ASKER

HI Scott,

Thanks for your response. Just to clarify, my web app is loading, this is just an example to show the code I'm trying to adjust.

Sorry, I'm a bit lost from the point you are making as it relates to modification of the media queries in my situation.
Just to summarize my situation: I increased the width of the sidebar by 20px and I now need to adjust other classes by 20px so the side bar still looks correct. When I try to make these changes that involve media queries using a custom stylesheet the changes won't stick. That being said, the media queries adjustments  seem to work when I change them directly in their stylesheet.  Every change I've made in my custom stylesheet has worked so far, I just can't figure out why the media query changes won't stick, In my case changing them from 220px to 240px.
It looks like you fixed the errors of the style sheets not loading.  You mentioned you have a custom stylesheet but where it is?

On the sample app https://gallery.shinyapps.io/087-crandash/, the <aside> is set to
@media screen and (min-width: 768px)
.left-side {
  top: 50px;
}
.left-side {
  position: absolute;
  width: 220px;
 /* top: 0;           -over ridden*/ 
}

Open in new window


On your page
@media screen and (min-width: 992px)
.left-side {
  top: 50px;
}
.left-side {
  position: absolute;
  width: 220px;
 /* top: 0;           -over ridden*/ 
}

Open in new window

It looks like you are not using a custom style sheet and perhaps have updated the original https://winston.shinyapps.io/dash/_w_44b0baf8/AdminLTE-1.2/AdminLTE.css.  Doing a search of text on that page, I don't see "768".

I would suggest to put the AdminLTE.css back to the way it was and keep it minimized.  Then add a custom style sheet that you load after the AdminLTE.css so it will over ride any styles there.  This way your modifications will be easier to spot, plus if the app updates and you are forced to upload a revised AdminLTE.css, your changes will not get lost.
Avatar of TaSchm

ASKER

Hi Scott,

This web app is just an example and not the actual web app that I'm working on, so I have not added a custom stylesheet. That being said, it is the base theme and nearly the same starting code as my web app (I only see very small differences). If you needed to see my web app I'd have to figure something out as it's protected behind a password and I'm not sure about putting it out on the web because it has a lot of sensitive information.

To ensure there are not other css change conflicts in my stylesheet, I tried to make only the first media query change. For example in the code below (assume this is the only change in my custom stylesheet), if I were to only change the -220px to -240px the change still won't stick:

@media screen and (max-width: 992px)
.row-offcanvas-left .sidebar-offcanvas {
left: -220px;
}

Open in new window


All other custom css changes have worked up to this point. When I make the change I simply put this in the custom stylesheet:

@media screen and (max-width: 768px)
.row-offcanvas-left .sidebar-offcanvas {
left: -240px;
}

Open in new window


Note, the default max-width is set to 768px and I have just kept it at this. So the example link you gave is the same as mine. The original example link I sent was using 992px, but they are all built on the same base theme.

Tom
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of TaSchm

ASKER

That was the problem Scott! Do you know why those brackets do not show up when inspecting through the web browser? FYI, your jsbin examples didn't seem to load completely for me, so not sure if I needed to do something more.

You make an excellent point about: "Instead of moving things over far to the left or right, you can make make items visible or hidden." Right now, I'm glad this immediate problem is solved, but development of this web app will be ongoing for a long time, so I'll revisit your advice as we try to improve our script and make it more efficient.

I really appreciate all the help and advice you have given. Very professional and top notch!
Thank you Tom!  

Not sure why jsbin is not working.  They have changed it a little and maybe because I was logged in when I created it?  I hope that is not the case though.

Anyway, wrapping your head around the responsive thing is tough for everybody at first.  Once you start using it you will kick yourself for not using bootstrap sooner.  It makes generating your core page development much easier.