I am facing an issue with a sidebar that contains 2 divs.
<div class="sectionsContainer clearfix"><-- Sidebar -->
<div class="leftSection pull-left">
<p>Maor</p>
</div>
<div class="rightSection pull-right">
<div class="backButton clearfix">
<i class="fa fa-chevron-left fa-2x blueColor pull-left"></i>
<p class="pull-left"><strong>Back</strong></p>
</div>
<button class="btn blueButton ng-scope" data-ng-click="openPopover()"><i class="fa fa-plus"></i></button>
<div class="popover fade bottom in">
<div class="arrow"></div>
<div class="popover-content">...</div>
</div>
</div>
</div>
Both of them have the classes:
.leftSection, .rightSection {
width:50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
When I click on the Maor element, both leftSection and rightSection receive the "moveLeft" class:
.moveLeft {
-ms-transform: translate(-100%,0); /* IE 9 */
-webkit-transform: translateX(-100%); /* Chrome, Safari, Opera */
transform: translate(-100%,0); /* Standard syntax */
-webkit-transform-style: preserve-3d;
}
The outcome is that the "leftSection" div moves left along with the "rightSection" so only the "rightSection" is visible due to being under an "overflow:hidden" div.
The popover div properties are:
position:absolute;
top:0;
left:0;
max-width:276px;
padding:1px;
text-align:left;
background-color:#FFF;
background-clip:padding-box;
border:1px solid rgba(0,0,0,0.2);
border-radius:6px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
Now, when I click on the:
<button class="btn blueButton ng-scope" data-ng-click="openPopover()"><i class="fa fa-plus"></i></button>
The popover div becomes positioned relative to the rightSection. After investigating, I found out this is due to the moveLeft class using the translate property.
Do you have any suggestions or ideas to solve this?