I'm in IE 11 working with Angular and I have an span containing an icon that I'm trying to include via the following.
<ng-include
popover="popover"
class="input-group-addon popover-icon-warning"
role="button"
data-toggle="popover"
data-trigger="focus"
src="config.warningIconSVG"></ng-include>
Instead of the span coming in I get
<!-- ngInclude: -->
I've tried restructuring the ng-include, and adding the createElement to the javascript being loaded in but nothing works. Any answers or direction on where to look would be greatly appreciated.
Related
I have the following div in my cshtml (Razor) file, which by default does not display. I want to override the no-display and make it visible using jquery in the associated javascript file, but it does not work. I am calling $(uiElements.divConfirmationMessage).show(), but noting happens. Any advice or help is appreciated.
<p id="divConfirmationMessage" class="success-message message no-display">
<span style="width:50px;" class="fl">
<span class="icon successGreen"></span>
<span> #Session["message"]</span>
#*<span> Hello From Hugh</span>*#
</span>
#*<span class="icon close" style="padding-left:20px" id="spnReserveAcctCloseIcon"></span>*#
</p>
Your question is not clear, but as of my understanding, 'no-display' class has style to hide the element. You can removeClass 'no-display' to show the element as follows.
$('#divConfirmationMessage').removeClass('no-display');
Let me know if I understood wrong
I am trying to add a tooltip boostrap for a div tag at runtime. It work well on Chrome but in Edge it does not work.
<div id="#company.Id" class="fit-container pointer_cursor row" data-toggle="tooltip" title="#company.Comment" data-placement="bottom"><.div>
At runtime i will add a tooltip for div, but after i added, when i hover on div tag, the tooltip show nothing. Even though i call $('div').tooltip() in javascript.
Please help me.
Its working in all browsers. May be you forgot to add some assets.
$('div').tooltip();
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="" class="fit-container pointer_cursor row" data-toggle="tooltip" title="tooltip test" data-placement="bottom">test</div>
My question is about Gentelella Alela template
In this HTML page, there is an icon with class="fa fa-chevron-up" that displays an icon to close the panel (See HTML code at line: 294). When the panel is closed, another icon image should appear to re-open the panel again but I can't find it in the HTML page.
its a CSS you will not found it in your HTML
but you can reach the style at this file:
[url..]/assest/template/vendors/font-awesome/css/font-awesome.min.css
The "magic" is somewhere in the custom(.min).js
$(".collapse-link").on("click",function(){
...
t.toggleClass("fa-chevron-up fa-chevron-down")
there is a click handler that changes the class from fa-chevron-up to fa-chevron-down and back again every time you click.
Thank you guys for your help.
In fact, I did a big mistake! I changed the "fa fa-chevron-up" icon to a Bootstrap glyphicon (in HTML line 249)! In fact, if you change that icon name in HTML to a "Bootstrap glyphicon" the provided javascript will not display the "fa-chevron-down" icon!
Thank you.
How to add html to title in popover? In documentation I can found only using html in content. It is possible to add html to title? I know that I can style this in css but I want to add button to title.
https://plnkr.co/edit/G1Q6g3oZhFKZpgbsMCUK?p=preview
<button uib-popover-html="htmlPopover" popover-placement="bottom" popover-title="Tekst -> <button>Edit</button>" class="btn btn-default">HTML Popover</button>
If you look at to final generated HTML, you can get idea how its going to render it on UI.
for your attribute popover-title="Tekst -> <b>Sample</b> <button>Edit</button>"
HTML generated as below,
<h3 class="popover-title ng-binding ng-scope" ng-bind="uibTitle" ng-if="uibTitle">Tekst -> <b>Sample</b> <button>Edit</button></h3>
Please check attribute "ng-bind" it means whatever you provide to popover-title will internally attached with ng-bind.
Like the same if you observe your popover body generation for uib-popover-html="htmlPopover"
corresponding HTML will generated as below
<div class="popover-content ng-binding" ng-bind-html="contentExp()"><b style="color: red">I can</b> have <div class="label label-success">HTML</div> <input type="button" value="sample"> content</div>
here you can see "ng-bind-html" thats why body can take any HTML and display it on UI while its not true for Title coz its using ng-bind.
Check this plunker : http://plnkr.co/edit/eREFCpVrYSi6kw7mNNXq?p=preview
I am trying to display a popover divs here . Please click the question mark icons. You will notice that there is a popover div that shows up in all browsers. However, in Internet Explorer 7, it fails to display properly. I tried using z-index property but that does not seem to work. How can I make the popover show up on top of the input field?
Below is a sample HTML
<div class="col-xs-5 divPopUp">
<label class="control-label customerAccountNo" for="custom4">Customer Acct No</label>
<img src="32005/images/iconQuestion.png" alt="Help" data-toggle="popover" data-placement="right" data-content="Found on the Plush Rewards flyer provided at the store. Lost this? Please contact the store you purchased from" class="popUp customerAccountNoImg"/> </div>
Screenshot added of the issue:
Not easy to solve without a fiddle, but using IE debug tool, I was able to solve the problem, but not sure it really works in live exemple.
I added a z-index in the div col-xs-5 :
<div class="col-xs-5 divPopUp" style="z-index: 100">
Can you edit css for this element ?