• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 519
  • Last Modified:

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.
0
TaSchm
Asked:
TaSchm
  • 4
  • 3
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
First of all, I think part of your issue could be css files not loading
Console Screen ShotMore 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

0
 
TaSchmAuthor Commented:
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.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
TaSchmAuthor Commented:
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
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That is good you are making a test case like this.

I started to recreate to play http://jsbin.com/qitexu/1/edit?html,output and then I pasted your code directly to the validator and came up with some errors.  Interesting that the link you give https://winston.shinyapps.io/dash/# does not validate but the sample I found does https://gallery.shinyapps.io/087-crandash/.  

When you see things like "not allowed" that could break what you are doing although fixing it may not be the answer. However, you can at least rule it out.   I would try and get this to validate as much as you can.  I don't think you need to worry about the title not being in the head section but you do need to fix not putting a div inside a heading tag or closing elements.  

By playing with this, I noticed your media query code was missing brackets.  Note the difference below to what you have.  My sample at http://jsbin.com/qitexu/2/edit does work now compared to http://jsbin.com/qitexu/1/edit that has your media query code.
    @media screen and (max-width: 768px){
    .row-offcanvas-left .sidebar-offcanvas {
        left: -240px!important;
 
        }
    }
 @media screen and (max-width: 768px){
    .row-offcanvas-left.active {
        left: 240px;
      
    }
 }

Open in new window


About media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

I realize you are just trying to change the size and move things around to match.  Since you are using bootstrap, there are helper classes built in where you can show and hide based on the viewport size.  Instead of moving things over far to the left or right, you can make make items visible or hidden.  http://getbootstrap.com/css/#responsive-utilities
0
 
TaSchmAuthor Commented:
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!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now