I ma trying to figure out how to change the width of the JQM panel animation. I can change the width of the content in the panel, but the animation still opens in a predefined width I don't know how to change.
Here is what I have tried and which changes the content.
.ui-panel {
width: 150px;
}
I have looked through the JQM docs but havent found the solution. Hoping for help :-)
EDIT
Well, actually, I found this script which does the work, but... Only if I change all the #left-panel-width with an actual width like 150px? Why wont the #left-panel-width work?
#left-panel-width: 100px;
#right-panel-width: 100px;
.ui-panel {
width: #left-panel-width;
}
.ui-panel.ui-panel-position-right {
width: #right-panel-width;
}
.ui-panel.ui-panel-closed {
width: 0;
}
.ui-panel-position-left {
left: -#left-panel-width;
}
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
-webkit-transform: translate3d(-#left-panel-width, 0, 0);
-moz-transform: translate3d(-#left-panel-width, 0, 0);
transform: translate3d(-#left-panel-width, 0, 0)
}
.ui-panel-position-right {
right: -#right-panel-width
}
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
-webkit-transform: translate3d(#right-panel-width, 0, 0);
-moz-transform: translate3d(#right-panel-width, 0, 0);
transform: translate3d(#right-panel-width, 0, 0)
}
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: #left-panel-width;
right: -#right-panel-width
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(#left-panel-width, 0, 0);
-moz-transform: translate3d(#left-panel-width, 0, 0);
transform: translate3d(#left-panel-width, 0, 0)
}
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -#left-panel-width;
right: #right-panel-width
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(-#right-panel-width, 0, 0);
-moz-transform: translate3d(-#right-panel-width, 0, 0);
transform: translate3d(-#right-panel-width, 0, 0)
}
#media (min-width:55em) {
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: #right-panel-width
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: #left-panel-width
}
}
Thanks in advance ;-)
Working example: http://jsfiddle.net/Gajotres/7GvX4/
When working with jQuery Mobile if you want to override original CSS you must use !important. Also because jsFiddle don't support CSS variables everything is hardcoded.
CSS:
.ui-panel {
width: 50px !important;
}
.ui-panel.ui-panel-position-right {
width: 50px !important;
}
.ui-panel.ui-panel-closed {
width: 0;
}
.ui-panel-position-left {
left: 50px !important;
}
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
-webkit-transform: translate3d(50px, 0, 0) !important;
-moz-transform: translate3d(50px, 0, 0) !important;
transform: translate3d(50px, 0, 0) !important;
}
.ui-panel-position-right {
right: 50px !important;
}
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
-webkit-transform: translate3d(50px, 0, 0) !important;
-moz-transform: translate3d(50px, 0, 0) !important;
transform: translate3d(50px, 0, 0) !important;
}
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: 50px !important;
right: 50px !important;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(50px, 0, 0) !important;
-moz-transform: translate3d(50px, 0, 0) !important;
transform: translate3d(50px, 0, 0) !important;
}
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open, .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: 50px !important;
right: 50px !important;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translate3d(50px, 0, 0) !important;
-moz-transform: translate3d(50px, 0, 0) !important;
transform: translate3d(50px, 0, 0) !important;
}
#media (min-width:55em) {
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: 50px !important;
}
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: 50px !important;
}
}
Check this page http://demos.jquerymobile.com/1.3.0/docs/examples/panels/panel-styling.html#demo-page -- look at the source... it says, "
Panel styling
<p>In this demo we show you how to:</p>
<ul>
<li>Change the width of a panel.</li>
<li>Create a panel navmenu with listviews and collapsibles.</li>
<li>Change the shadow of a reveal menu so it is on top of the list items.</li>
<li>Set a background image for a page that contains a panel.</li>
<li>Give the page a responsive layout with CSS columns.</li>
</ul>
The top of the source code of the page has specific instructions. They worked for me.
Related
I restate my question here:
When I work on a test page of my site (https://www.jobcool.fr/single.html), the youtube videos appear but when I put this page on the internet with filezilla, the videos no longer work.
I used a code that can lighten the weight of youtube videos
<script>
( function() {
var youtube = document.querySelectorAll( ".youtube" );
for (var i = 0; i < youtube.length; i++) {
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
};
} )();
</script>
/*=======VIDEO YOUTUBE=======*/
.video .youtube {
background-color: #000;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.82%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.video {
display: block;
width: 600px;
margin: 0 auto 35px auto;
max-width: 100%;
}
/*=======CADRE DE LA VIDEO YOUTUBE=======*/
.video .wrapper {
border: 5px solid black;
width: 100%;
}
/*=======CADRE DE LA VIDEO=======*/
.video .wrapper {
width: 100%;
padding: 7.5px 7.5px;
border: 1px solid #C9C9C9;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
-ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
-o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
}
.video .wrapper {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
.video .wrapper:nth-child(even) a img {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
.video .wrapper:nth-child(3n) a img {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
.video .wrapper:nth-child(5n) a img {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
.video .wrapper:nth-child(8n) a img {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
.video .wrapper:nth-child(11n) a img {
position: relative;
top: 3px;
left: -5px;
}
.video .wrapper:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}
.video .wrapper {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
}
/* On hover, darken the shadows a bit */
.video .wrapper {
-webkit-box-shadow: 0 3px 6px rgba(white);
-moz-box-shadow: 0 3px 6px rgba(white);
}
<div class="video" data-id="abn-w2Gs54o">
<div class="wrapper">
<div class="youtube" data-embed="abn-w2Gs54o">
<div class="play-button"></div>
</div>
</div>
</div>
Could you help me understand why?
Best regards
enter image description here
The z-index of these images is set so they should be staked blue, red, green but in iOS browsers and Safari on macOS the order is reversed so they display green, red, blue.
Here is a CodePen, the issue effects all iOS browsers and Safari on macOS.
https://codepen.io/W3-design/pen/pBOJyy
HTML:
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
SCSS:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
-webkit-transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
&:nth-of-type(1) {
z-index: 100;
top: 0;
}
&:nth-of-type(2) {
z-index: 90;
top: 80px;
}
&:nth-of-type(3) {
z-index: 80;
top: 160px;
}
&:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
-webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
opacity: 1;
z-index: 101;
}
}
}
I would like the z-index to be the same across all browsers.
Here you are:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
}
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: translateZ(-1000px) rotate3d(1, 0, 0, 55deg) rotate3d(0, 0, 1, -30deg);
}
img:nth-of-type(1) {
z-index: 100;
top: 0;
}
img:nth-of-type(2) {
z-index: 90;
top: 80px;
}
img:nth-of-type(3) {
z-index: 80;
top: 160px;
}
img:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1, 1.1);
opacity: 1;
z-index: 101;
}
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
I've read quite a few SO posts on iOS scrolling issues, I'm aware a few people have had issues. I've tried numerous fixes but I'm absolutely stuck on this!
I'm making a one page website. The layout is a 3D cube, using CSS3 transforms and animations. In a nutshell, the problem is the content on the front face will scroll, the content on other faces wont. As far as I can tell this breaks when I rotate the faces to create the cube. The content in the right face will not scroll, it acts like overflow: hidden;
I don't know how useful this will be, but I've created an Fiddle. It uses on part of the code (the main idea) and the whole lot is quite a bit to post. Has anyone tried to get overflow content to scroll on iOS inside a rotated/transformed parent element before?
I'm going crazy, please help! Thanks!
Here's my SASS from the Fiddle;
body {
margin: 0;
padding: 0;
}
.cube-container {
width: 100%;
perspective: 2000px;
-webkit-perspective: 2000px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
.cube-shell {
position: relative;
z-index: 1;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateY( 0deg ) translateX( 0px );
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease;
&.rotate-center-to-right {
animation-name: center-to-right;
}
}
.face {
background-position: 50% 50%;
background-size: cover;
padding: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
position: relative;
z-index: 10;
text-align: center;
width: 100%;
// When we are in "cube mode"
&.cube-compatible {
overflow: hidden;
position: absolute;
// z-index: 5;
top: 0;
left: 0;
right: 0;
// z-index: 0;
}
> .face-inner {
overflow: scroll;
// -webkit-overflow-scrolling: touch;
}
}
.face-inner {
max-width: 1320px;
max-height: 100%;
height: 100%;
width: 100%;
padding: 40px 60px;
margin: auto;
// display: inline-block;
display: block;
vertical-align: middle;
position: relative;
z-index: 30;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
// Center face
.face-center {
position: relative;
text-align: center;
background: #ccc;
}
// Right face
.face-right {
transform-origin: center right;
background: #efefef;
}
.scroll-content {
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}
.scrollable {
-webkit-backface-visibility: hidden;
}
}
#keyframes center-to-right {
0% {
transform: rotateY( 0deg ) scale3d( 1, 1, 1 );
}
// 15% {
// transform: rotateY( 0deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
// 75% {
// transform: rotateY( -90deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
100% {
transform: rotateY( -90deg ) scale3d( 1, 1, 1 );
}
}
https://jsfiddle.net/fkb241ys/14/
This code works well on Mozilla Firefox, Google Chrome, and MS explorer. However, it doesn't work at all on mobile devices, particularly iOS. Please let me know what needs to be added or removed to make it function properly.
HTML
<div class="bg-grad">
<div class="clouds">
<div class="cloud x1"></div>
</div>
</div>
CSS
/* BG Gradients
~-----------------------------------------*/
.bg-grad {
background: #000;
background: transparent url("http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg") center bottom no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.bg-grad .bg-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 6;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.bg-grad .bg-layer.on {
opacity: 1;
}
/* Clouds
~-----------------------------------------*/
.cloud {
width: 100%;
height: 900px;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
background: transparent url('http://freepngimages.com/wp-content/uploads/2014/11/ten-party-balloons.png') left bottom no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#media (max-width: 550px) {
.cloud {
display: none;
}
}
.x1 {
-moz-animation: moveclouds 40s linear infinite;
-webkit-animation: moveclouds 40s linear infinite;
animation: moveclouds 40s linear infinite;
width: 2036px;
height: 1608px;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
https://jsfiddle.net/r2uuvubg/2/
I set the width of my panel according to the sample in http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-styling.html.
Everything goes fine, but my fixed toolber in the footer moves further than the header and the contents. This makes a gap from the fixed toolbar to the panel.
Anybody knows how to fix this?
Thanks.
#demo-page #left-panel.ui-panel {
width: 15em;
}
#demo-page #left-panel.ui-panel-closed {
width: 0;
}
#demo-page .ui-panel-position-left.ui-panel-display-reveal {
left: 0;
}
#demo-page .ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open,
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
.ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: 15em;
right: -15em;
}
#demo-page .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
left: 0;
right: 0;
-webkit-transform: translate3d(15em,0,0);
-moz-transform: translate3d(15em,0,0);
transform: translate3d(15em,0,0);
}
/* Reveal menu shadow on top of the list items */
#demo-page .ui-panel-display-reveal {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#demo-page .ui-panel-content-fixed-toolbar-position-left, .ui-panel-content-wrap-position-left {
-webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
-moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
box-shadow: -5px 0px 5px rgba(0,0,0,.15);
}