I am currently working with Cordova 3.1.0 and Android 17.
Here is the HTML code for my pop-up:
<div id="rightNavPrpPopup1" data-role="popup" class="r-menu-dropdown">
<div class="r-menu-triangle"></div>
<a class="class-a" data-transition="slide">A</a>
<a class="class-b" data-transition="slide">B</a>
<a class="class-c" data-transition="slide">C</a>
<a class= "class-d" data-transition="slide">D</a>
</div>
And here is my CSS:
.r-menu-dropdown{
margin: 30px 5px 0 0;
border-bottom: none;
}
.r-menu-dropdown a{
padding: 10px;
display: block;
color: #fff !important;
text-decoration: none;
border-bottom: 1px solid #666;
background: #555;
}
.r-menu-dropdown a:hover, .r-main-menu-dropdown a:hover{
background: #444;
}
.r-menu-triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 7.5px 13px 7.5px;
border-color: transparent transparent #555 transparent;
position: absolute;
right: -1px;
top: -14px;
}
The issue I am facing is that when I change the orientation of my device, the pop-up does not align properly according to the CSS. It always centers itself regardless of the orientation, even if I swap between them during the pop-up animation.
Can someone please help me resolve this issue? Thank you in advance!