P.K. P.K. - 5 months ago 16
AngularJS Question

directive works strange in bootstrap grid

Im AngularJS newbie:).

I have a simple directive driving some popovers for icon. It works ok in one place but in other is working improperly (it blinks and popup is moved down and it covers the icon).

HTML template:



<div class="row">
<div class="col-lg-6">
<h3 class="box-title">EMPLOYEE DETAILS</h3>
<div class="form-group field-userinfo-username">
<label class="control-label text-padding" for="userinfoUsername">Username</label>

<div class="row">
<div class="col-xs-11">
<input type="text" id="uuserinfoUsername" class="form-control" name="userinfoUsername" readonly ng-model="model.full_name" />
</div>
<div class="col-xs-1">
<form-field-information></form-field-information>
<!-- it's not working properly-->
</div>
</div>
<form-field-information></form-field-information>
<!-- it's working properly-->
...





Directive code:



'use strict';

angular.module('app')
.directive('formFieldInformation', function() {
return {
restrict: 'E',
template: '<i class="glyphicon glyphicon-question-sign" style="font-size: 16px" uib-popover="This field describes ..." popover-title="Field information:" popover-trigger="mouseenter"></i>'
//replace: true
};
});





Video added here

Answer

Your container (col-xs-1) is too small for the popup to fit inside when displayed. An easy fix is popover-append-to-body="true"

Code:

template: '<i class="glyphicon glyphicon-question-sign"  style="font-size: 16px"  uib-popover="This field describes ..." popover-append-to-body="true" popover-title="Field information:" popover-trigger="mouseenter"></i>'

enter image description here

Comments