Apex Code Development You need to sign in to do that
Don't have an account?
uxtx_tim behavior of media queries within visualforce pages
hello everyone
i have noticed strange behavior using media queries in visualforce pages. to demonstrate i have created a page with some simple structural markup. the expected behavior would be to stack two inline divs with the .panel class when the viewport is sized between 320 and 400 px by setting their width to from 45% to 99%.
this is exactly what happens when you take the markup and put in in a 'real' html page. but within a visualforce page, the width never gets set. the strange thing is that it seems to be only this query that is failing; the other media queries for sizes over 400px work!
See code below:
here's the markup for the vf page:
<apex:page controller="Lists" standardStylesheets="false" showHeader="false" sidebar="false">
<style>
#view {
overflow: auto;
border: 4px solid black;
margin-left: auto;
margin-right: auto;
width: 768px;
}
.panel, .section, .article{
display:inline;
float: left;
position: relative;
margin-left: 1%;
margin-right: 1%;
}
/* testing borders */
#view .panel {
border: 3px solid blue;
width: 45%;
}
#view .section {
border: 2px solid gray;
width: 99%;
}
#view .article {
border: 1px solid black;
width: 99%;
}
/* media queries */
@media all and (max-width: 400px) and (min-width: 320px) {
#view {
width: 320px;
}
#view .panel {
width: 99%;
}
}
@media all and (max-width: 640px) and (min-width: 401px) {
#view {
width: 400px;
}
}
@media all and (max-width: 799px) and (min-width: 641px) {
#view {
width: 768px;
}
}
@media all and (max-width: 959px) and (min-width: 800px) {
#view {
width: 800px;
}
}
@media all and (max-width: 1023px)and (min-width: 960px) {
#view {
width: 960px;
}
}
@media all and (max-width: 1299px) and (min-width: 1024px) {
#view {
width: 1024px;
}
}
@media all and (min-width: 1300px) {
#view {
width: 1280px;
}
}
</style>
<div id="view">
<p>test view</p>
<div class="panel">
<p>test panel</p>
<div class="section">
<p>test section</p>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
</div>
<div class="section">
<p>test section</p>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
</div>
</div>
<div class="panel">
<p>test panel</p>
<div class="section">
<p>test section</p>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
</div>
<div class="section">
<p>test section</p>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
</div>
</div>
</div>
</apex:page>
and here's the exact same markup taken out of the visualforce context:
<doctype html>
<head>
<style>
#view {
overflow: auto;
border: 4px solid black;
margin-left: auto;
margin-right: auto;
width: 768px;
}
.panel, .section, .article{
display:inline;
float: left;
position: relative;
margin-left: 1%;
margin-right: 1%;
}
/* testing borders */
#view .panel {
border: 3px solid blue;
width: 45%;
}
#view .section {
border: 2px solid gray;
width: 99%;
}
#view .article {
border: 1px solid black;
width: 99%;
}
/* media queries */
@media all and (max-width: 400px) and (min-width: 320px) {
#view {
width: 320px;
}
#view .panel {
width: 99%;
}
}
@media all and (max-width: 640px) and (min-width: 401px) {
#view {
width: 400px;
}
}
@media all and (max-width: 799px) and (min-width: 641px) {
#view {
width: 768px;
}
}
@media all and (max-width: 959px) and (min-width: 800px) {
#view {
width: 800px;
}
}
@media all and (max-width: 1023px)and (min-width: 960px) {
#view {
width: 960px;
}
}
@media all and (max-width: 1299px) and (min-width: 1024px) {
#view {
width: 1024px;
}
}
@media all and (min-width: 1300px) {
#view {
width: 1280px;
}
}
</style>
<script>
$j=jQuery.noConflict();
$j(function(){
console.log("dom loaded");
});
</script>
</head>
<body>
<div id="view">
<p>test view</p>
<div class="panel">
<p>test panel</p>
<div class="section">
<p>test section</p>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
</div>
<div class="section">
<p>test section</p>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
</div>
</div>
<div class="panel">
<p>test panel</p>
<div class="section">
<p>test section</p>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
</div>
<div class="section">
<p>test section</p>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
<div class="article">
<p>test article</p>
<p>test article</p>
</div>
</div>
</div>
</div>
</body>
</html>
i suspect it has to do with the the way the server is generating the html from the vf code but I dont know what it might be. there are gaps in my knowledge of visual force and of using media queries.
thanks in advance for any help in understanding what is going on here.
Added some resizing code so I could verify the size of the window, and removed the controller attribute and jQuery bit, but... no changes to style or the DOM except to support this output mechanism. Using Firefox 4.0.1, and Chrome 11.0.696.71, Internet Explorer 9.0.8112.16421 (64-bit, non-compatibility mode) on Windows 7 Professional 64-bit, all of them worked like a charm. However, I found that enabling Compatibility Mode (the broken page icon) resulted in the entire media query set being thrown out. This is the only foreseeable circumstance where it wasn't working as written. It appears, therefore, that your browser is broken or you're in compatibility mode or some such. I don't think this is an actual VF issue.
didnt even bother in IE (still on xp). I'm using FF4.0.1 and Chrome 11.0.696.71. FF has the issue I described; Chrome does not. I suspect my media queries are not formed well and FF doesnt like it.
That's odd. I'm literally in FF 4.0.1 right now, and it's working like a charm. I'd check for some innocuous-looking typo that's screwing it up. Firefox has always been stricter than Chrome, so some arbitrary thing could be screwing it up. Or maybe even jQuery itself is causing some unforeseen side effects. I'd try using Firebug and see if you can track it down. I'm sorry I can't be more helpful, but I'm not able to reproduce this.