Pane Border (Shadow) -- with Side Menu


#1

I noticed that many apps have this issue, including the one I am currently working on. There is a white border/shadow that I can’t get rid of with css. Any suggestion is greatly appreciated.


#2

Here’s the CSS that creates that effect:

.menu-content {
-webkit-transform: none;
-moz-transform: none;
transform: none;
box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0, 0, 0, 0.2);
}
.menu-content {
-webkit-transform: none;
-moz-transform: none;
transform: none;
box-shadow: -1px 0px 2px rgba(0, 255, 0, 0.2), 1px 0px 2px rgba(0, 0, 0, 0.2);
}

#3

Yeah. I got the same thing. For some reason it works on Chrome, but not on android.


#4

I have the same problem, I managed to put the box-shadow by adding it to the .pane inside the .menu-content, but this 1px white border is till there and I can’t find a way to get rid of it. I hope someone will help us on this :slight_smile:


#5

I’ve gotten this too, and I’m pretty sure this is do to android’s webview. I’ve gotten white borders on my headers and when I rotate, there gone!

Depending on how high-spec your device is, I think your going to get variations in performance and rendering because androids default webview kinda just sucks.

Now there are some projects out there that let you use the chrome web view vs the default android browser, which is much better. Even cordova it self uses the chrome webview by default in 4.4


#6

has this ever been resolved? It still happens for devices with android older than 4.4

I know that this issue is not present for chrome webview (which is the default in 4.4). However getting chrome web view included in the package for devices that have os’s < 4.4 adds ~20MB and I don’t think for this simple problem it is not the ultimate solution.

Would anyone be interested to post up a fix?


#7

For me i resolved the issue by overriding the css
.grade-b .menu-content, .grade-c .menu-content {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}

Put the Border color whatever you want .If you don’t want the border than disable the border using border:none.


#8

thanks! work like a charm!