Having a situation where two components are involved. The first component has an ng-click function that triggers a modal containing the second component. Currently, everything is working smoothly. However, the issue arises when the modal should only open at a resolution of 768 pixels...
I have tried using media queries to address this problem but without any success..
Thank you in advance for your help!
Here is the code snippet:
parent.html:
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" ng-click="$ctrl.openModal()">
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 benefit-parenthood">
<div class="description">
<p class='title'>lorem impsun title</p>
<p class="area">
<i class="fa fa-cookie-bite cookie-icon" aria-hidden="true"></i>
<span class="area-item">lorem impsum</span>
</p>
<p class="area-mobile">lalala</p>
</div>
</div>
<div class="hidden-xs col-sm-3 col-md-3 col-lg-3 container-image">
<div class="partner-brand">
<img src="app/assets/greyimg.png" class="partner-avatar">
</div>
</div>
</div>
parent.component.js :
(function () {
'use strict';
angular
.module('parenthoodBenefit')
.component('parenthoodBenefitComponent', {
bindings: {},
templateUrl: 'app/parenthood-benefit/parenthood.html',
controller: parenthoodBenefitCtrl
})
function parenthoodBenefitCtrl($scope, $uibModal) {
this.openModal = function () {
$uibModal.open({
templateUrl: 'app/modal-benefit/modal.html',
size: 'lg',
controller: function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
}).result.then(function () { }, function (res) { })
};
}
}());
modal.html :
<i class="fa fa-times icon-close" aria-hidden="true" ng-click="ok()" ></i>
<access-detail-component></access-detail-component>