I am working on an Ionic app that uses AngularJS. One issue I encountered is with a modal popup that can sometimes extend beyond the visible area.
To address this, we applied overflow: hidden to its CSS class.
However, there is a specific functionality in this modal where users can draw lines on the map by clicking and dragging. These lines are drawn perfectly within a <div> element.
Is there a way to prevent click-drag actions when a user initiates a click within this <div> tag?
Update: I still need assistance. The modal was displaying behavior similar to what is described in this post: How to make modal scroll with main page
Currently, my code looks like this:
<ion-modal-view class="my-modal">
<ion-content style="position:absolute">
<div class="row main-wrapper">
<div class="left-panel-wrapper {{setSize}} col-25" >
<div ng-show="!showMyPlans || loading" class="left-panel {{setSize}} item-animate">
<h3>My Plan Templates</h3>
<p>Select a template from the left or select to start from scratch.</p>
<ion-content scroll='true' class="left-panel-template">
<div ng-repeat="template in templates" ng-class-even="'float-right'" ng-class-odd="'float-left'">
<div class="usemouse graph-bg templates-bg {{setSize}}">
<div data-drag="true" ng-model="templates" jqyoui-draggable="{index:{{$index}}, placeholder: 'keep', deepCopy: true}" data-jqyoui-options="{revert: 'invalid', helper: 'clone', containment: '.my-modal'}">
<svg ng-style="{'position': 'absolute', 'height': '{{rawSmallSize}}px', 'width': '{{rawSmallSize}}px'}" ng-repeat="line in template.lines">
<line ng-attr-x1="{{line.x1*smscale}}" ng-attr-y1="{{line.y1*smscale}}" ng-attr-x2="{{line.x2*smscale}}" ng-attr-y2="{{line.y2*smscale}}"></line>
</svg>
</div>
<div ng-show="template.lines.length == 0" class="usemouse graph-bg templates-bg {{setSize}} templates-blank text-center" style="margin-top:0" on-tap="newBlankPlan();">
<h6 style="margin-top:0" >Blank</h6>
</div>
</div>
</div>
</ion-content>
</div>