The HTML for the popup is:
<div id="commentBox" class="commentBox">
<div class="panel panel-default">
<div class="panel-body">
<input type="text" value="" id="annotationText" />
<button type="button" ng-click="setComment()">OK</button>
</div>
</div>
</div>
CSS:
.commentBox {
position: absolute;
z-index: 9999;
left: 72px;
top: 58px;
display:none;
}
#commentBox:before {
position: absolute;
top: -7px;
left: 1px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
#commentBox:after {
position: absolute;
top: -6px;
left: 0px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
The commentBox:after and commentBox:before are the small arrow-tip and it's shadow on top-right corner of commentBox.
Issue: when I click on map on extreme right-side the popup-div shows outside of the main Map Div. Please refer below screenshot.
How do I make this DIV to display within the limits of MAP DIV when clicked extreme right on MAP?