We have an Angular Bootstrap popover tooltip that contains some html content and scope variables along with a button inside the popover.
Currently we have a small version running in Plunkr and the popover html is being displayed correctly including all break tags.
The problem seems to occur when we run in locally in Visual Studio where all of the break tags are recognized until the button is rendered, then it seems to be completely ignored and the button gets dropped at the top of the popover:
<div>
Name: {{ person.fullName }}
<br />
Dept: {{ person.deptId }}
<br />
Job Desc: {{ person.jobDesc}}
<br />
Phone:{{ person.phone}}
<br />
One!<br />
Two!<br />
Three!<br />
<input type="button" value="Click Me" class="btn btn-default" ng-click="changeName()">
We saw a couple of posts where $sce.trustAsHtml was used and added that as well as data-html='true'
scope.htmlPopover = $sce.trustAsHtml('./HTML/popoverTemplate.html');
element[0].setAttribute('data-html', 'true');
element[0].setAttribute('uib-popover-template', "htmlPopover");
element[0].setAttribute('popover-append-to-body', 'true');
element[0].setAttribute('popover-trigger', "'click'");
This did not solve our problem.
Both the Plunk and our local project are running Angular 1.6.2 and Angular Bootstrap 2.5.0.
Can't figure out why this would work in Plunkr and not in Visual Studio.
Am I missing something?
Thanks.
We had a css in our cshtml page where there was an existing .btn class that was causing a conflict.
Since I think the last css entry wins, I suspect that was causing the issue.
Once we removed that style, the button was displayed correctly.
Thanks.
Related
Hello I want my tooltip to appears whenever input[submit] is disabled. Disabling input works very well it is disabled when inputs[text] are invalid but tooltips doesn't shows.
Here is my code:
<input type="submit"
form="loginData"
ng-disabled="loginData.login.$invalid || loginData.password.$invalid"
class="btn btn-primary btn-md"
ng-click="$ctrl.login()"
value="Zaloguj"
uib-tooltip="Wypełnij formularz!"
tooltip-placement="top"
tooltip-trigger="'mouseenter'"
tooltip-append-to-body="true"
tooltip-enable="loginData.login.$invalid || loginData.password.$invalid" />
tooltip-enable directive should make tooltip enabled when input login or password are invalid but it doesn't work, please quick help!
EDIT:
I was working with google chrome so I didn't realize that this solution actually works in others browsers (mozilla for sure). But still it doesn't work with newest google chrome so it is not satisfactory enough.
Summarizing the new question is how to walk around that issue in google chrome?
HTML elements with disabled attribute do not fire events.
But don't worry, you can use a simple div/span with uib-tooltip directive as wrapper of the disabled input/button.
In your case you want to show the tooltip only when is disabed, so try the following... (PLUNKER)
HTML
<span uib-tooltip="Demo tooltip"
tooltip-enable="isBtnDisabled"
ng-class="{'my-tooltip': isDisabled}">
<input type="submit" ng-disabled="isDisabled" class="btn btn-info" value="My btn">
</span>
CSS
.my-tooltip {
display: inline-block;
}
.my-tooltip input {
position: relative;
z-index: -1;
}
I have used angularJS validations like ng-required and ng-minLength and show them if $touched and $invalid true. I have used UI-route to show different page in slides(using ngAnimate) on a single page. When we click the button to move on next slide it show the validation message pop-up of next page as shown in image. It shows the validation message popup on page load. I have used novalidate on form tag and formnovalidate on button but not working at all.
<input type="email" class="form-control" placeholder="Email" ng-model="registration.email"
name="email" ng-required="true" ng-class="{errorField: (personalInfoForm.email.$invalid
&& personalInfoForm.email.$touched) || isEmailError}" ng-blur="validateUserNameAvailability()"
ng-pattern ="emailPattern" />
<div class="errorTooltip" ng-show="isEmailError">{{emailError}}</div>
<div ng-show="personalInfoForm.email.$invalid && personalInfoForm.email.$touched && !isEmailError">
<div ng-show="personalInfoForm.email.$error.required" class="errorTooltip">
{!$Label.Text_You_Must_Enter_A_Value}
</div>
<div ng-show="personalInfoForm.email.$error.email || personalInfoForm.email.$error.pattern" class="errorTooltip">
{!$Label.Text_Please_Enter_Valid_Email}
</div>
</div>
Please post you complete code for the form but from your description of the issue i'm guessing the button type used on the "Next" button to go to the next slide must be
<input type="submit">Next</input>
change it to button.
<input type="button">Next</input>
You must have used a common form tag for all the slides and submit the form at the end of the last slide to save the data. But by using the button type as submit on the Next button the form is getting submitted at the end of each slide. Let me know if my analysis was correct.
I have found fix for this issue. Firefox load angularJS slow therefore it show all validation message on page load and later hide them.
I have added one css line in starting of page that added to ui-view.
<style>.first-page{ display: none; }</style>
I have removed this css in the end of page.
<script>$('.first-page').css('display','block');</script>
I have applied this class 'first-page' on main div of page.
This resolve my issue. Now all pages loaded in ui-view component perfectly.
Note: This also resolve the content override issue on slide animation. Firefox load angular animation slow. I have hide the page till its load completely. This resolve all firefox issues.
I have two button that are overlapping, and use ng-hide for the m with the same flag.
On Chrome it work perfectlly, but when I use IE 11, the icons are overlapping on page load.
I have two icons on in my search box:
And On IE11, when the page is loading:
The code is:
<button type="submit" class="btnSubmit" ng-show="vm.isSearchIconVisible" >
<i class="iconMglass"></i>
</button>
<button type="reset" ng-show="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()">
<span class="clearIcon">X</span>
</button>
How can I fix it ?
Try using ng-ifinstead of ng-show.
The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content.
Not using CSS by changing to ng-if prevents these CSS problems. Although the ng-ifcreates a new scope but that impact is nothing.
<button type="submit" class="btnSubmit" ng-if="vm.isSearchIconVisible" >
<i class="iconMglass"></i>
</button>
<button type="reset" ng-if="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()">
<span class="clearIcon">X</span>
</button>
If you don't want to change to ng-if, then please share a working Plunkr/... so help you find your problem. Since it will be a cssissue most likely.
The Problem was that IE11 save cash with old code, CTR+R dident solve this problem.
In the IE11 option I revoce the option to save cash and it solve the problem, the new code appear.
I have an ng-click in in a bootstrap popover that doesnt seem to work. when I move it out of the popup into the page it seems to work. Also the ng-model value doesnt seem to update either.
<div id="popover-content" class="hide">
<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label">
<button type="button" ng-click="newQuote()">New quote</button>
</div>
Is this because the popover is created in the dom and angular does not know it exists? Any ideas how I can get it to work? Thanks
EDIT:
Here is the newQuote
$scope.newQuote = function() {
$scope.selectedItems.quote = angular.copy(defaultQuote);
$scope.solution.quotes.push($scope.selectedItems.quote);
$scope.selectedItems.quote.label = 'New Quote';
$scope.addMessage('Quote created successfully', 2);
};
EDIT 2
Here is a plunker showing the issue - the alert is not displayed when ng-click="newQuote()" is fired
http://plnkr.co/edit/ANH98vlflPK9c5qA3ohO?p=preview
You should create a Directive to make angular works with Bootstrap Popover. You can take a look in your Developer console when using Bootstrap Popover. It actually does not reuse the DOM that you predefined - ie :
<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label">
<button type="button" ng-click="newQuote()">New quote</button>
But add in a new piece of DOM - ie
<div class="popover fade bottom in" role="tooltip" id="popover770410" style="top: 30px; left: 0px; display: block;">
<div class="arrow" style="left: 15.9420289855072%;">
</div><h3 class="popover-title">New quote</h3><div class="popover-content">
<input type="text" placeholder="Quote ID" ng-model="selectedItems.quote.label" class="ng-pristine ng-untouched ng-valid">
<button type="button" ng-click="newQuote()">New quote</button>
</div>
</div>
Therefore Angular will not understand new piece of DOM because it has not compiled yet - ie : You cannot use ng-click as well as ng-modal. One way to work around this is to create a directive and compile your html content before passing that piece of DOM to Bootstrap Popover.
I have created this fiddle to demonstrate this idea.
As you can see :
I have compile you content and bind it to current scope
$compile(content)(scope);
Before passing that piece of DOM to popover
var options = {
content: compileContent,
html: true,
title: title
};
$(elem).popover(options);
With this way to can let Angular understand new piece of DOM added and do its work correspondingly.
Furthermore, actually there quite some directives that works with Bootstrap Popover that you can take a look at instead of creating new directives
AgularUI Bootstrap
Angular Strap
Reference :
http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service
twitter bootstrap popover doesn't work with angularjs
Using jQuery Mobile and AngularJS together, without a plug-in but having read about it, loading jQuery first, and the two frameworks are mostly playing very nicely and quite powerful having both.
Trying to render jQuery Mobile checkboxes with
<div data-role="fieldcontain">
<legend>Showing more lodges slows the display</legend>
<fieldset data-role="controlgroup" data-type="horizontal">
<label ng-repeat-start="(lodgekey, lodge) in data.lodges" for="chooser_{{lodgekey}}">{{lodge.lodgetitle}}</label>
<input ng-repeat-end id="chooser_{{lodgekey}}" type="checkbox" ng-model="lodge.selected" />
</div>
</fieldset>
</div>
Problem is that jQuery Mobile finishes setting up the checkbox as a button prior to Angular doing the repeat. So the repeated checkboxes stack up vertically even though I have used data-type="horizontal" in the fieldset, and each show as first/last orphan - which they are before AngularJS does its ngRepeat. Viewing the code example at http://demos.jquerymobile.com/1.0a4.1/docs/forms/forms-checkboxes.html and looking at the rendered DOM shows the way it should render.
My solution so far has been to reproduce the jQuery Mobile form using Angular, but this is not ideal, here is my code:
<div data-role="fieldcontain" id="lodge-chooser">
<legend>Showing more lodges slows the display</legend>
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
<div class="ui-checkbox" ng-repeat="(lodgekey, lodge) in data.lodges">
<label ng-class="{'ui-btn-active':lodge.selected, 'ui-corner-left':$first, 'ui-corner-right':$last}" for="{{lodgekey}}">{{lodge.lodgetitle}}</label>
<input id="{lodgekey}}" type="checkbox" ng-model="lodge.selected" />
</div>
</fieldset>
</div>
and CSS:
/* remove incorrect rounded corners which appear on all buttons*/
div#lodge-chooser label.ui-btn.ui-corner-all {
border-radius:0!important;
}
/* reinstate rounded corners in correct places */
div#lodge-chooser label.ui-btn.ui-corner-left {
border-bottom-left-radius:inherit!important;
border-top-left-radius:inherit!important;
}
div#lodge-chooser label.ui-btn.ui-corner-right {
border-bottom-right-radius:inherit!important;
border-top-right-radius:inherit!important;
}
This works, noting that the div.ui-checkbox is nested redundantly because jQuery Mobile still adds it in but my addition provides the styles needed and the extra nested div doesn't appear to do any harm.