2

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.

enter image description here

When clicked somewhere else: enter image description here

How do I make this DIV to display within the limits of MAP DIV when clicked extreme right on MAP?

0

I added few of new CSS classes to get this done

.commentDiamond {
        background: #F7F7F7;
        display: block;
        height: 16px;
        position: absolute;
        width: 16px;
        z-index: -1;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        box-shadow: 0 0 0.75em #777777;
        -webkit-box-shadow: 0 0 0.75em #777777;
    }

.commentDiamond.topleft {
    left: 5px;
    top: -6px;
}

.commentDiamond.topright {
    right: 5px;
    top: -6px;
}

.commentDiamond.bottomleft {
    left: 5px;
    top: 45px;
}

.commentDiamond.bottomright {
    right: 5px;
    top: 45px;
}

And then in JS file checked for the screen point and conditioned asper my requirement and then showed the required CSS classes from above list.

if (scrn_pt.x > (mapwidth - $("#commentBox").width() + 10) && scrn_pt.y > (mapHeight - $("#commentBox").height())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond bottomright");
    $("#commentBox").css({
        left: scrn_pt.x - 187 + "px",
        top: scrn_pt.y - 13 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else if (scrn_pt.x > (mapwidth - $("#commentBox").width())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond topright");
    $("#commentBox").css({
        left: scrn_pt.x - 187 + "px",
        top: scrn_pt.y + 60 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else if (scrn_pt.y > (mapHeight - $("#commentBox").height())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond bottomleft");
    $("#commentBox").css({
        left: scrn_pt.x + 1 + "px",
        top: scrn_pt.y - 13 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond topleft");
    $("#commentBox").css({
        left: scrn_pt.x + 1 + "px",
        top: scrn_pt.y + 60 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
}

Now the popup look like these: enter image description here enter image description here enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.