Please, take a look on snippet (you need to hover over the button).
Loading works strange while button has tooltip.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/>
<h3 class="ui header">Does not work as expected</h3>
<button class="ui icon loading button" data-tooltip="tooltip"><i class="settings icon"></i></button>
<h3 class="ui header">Works because without tooltip</h3>
<button class="ui icon loading button"><i class="settings icon"></i></button>
This is because both tooltip and loading use :before and :after styles so they will be interfering with each other.
You can fix this by wrapping your button in a span
<span data-tooltip="tooltip" data-position="right center">
<button class="ui icon loading button">
<i class="settings icon"></i>
</button>
</span>
https://jsfiddle.net/4uzroqjg/
Related
In PrimeNG 9, I could center-align the content projected into a button. Does anybody know how this can be achieved in PrimeNG 10?
<div class="ui-g ui-fluid" >
<div class="ui-g-12">
<button pButton>
<div>Content</div>
<i class="fa fa-home"></i>
</button>
</div>
</div>
Button Rendered in PrimeNG 9:
I already submitted an issue of having the rendered when the label is missing.
https://github.com/primefaces/primeng/issues/9482
Add style="width: 100%" to your Content div.
And you can set label=" " to avoid the char while waiting fix from PrimeNG team.
See StackBlitz
PrimeNG's documentation is not up-to-date when it comes to primeflex, please check primeflex's documentation directly instead:
https://www.primefaces.org/primeflex/
Below code snippet centers a button, you can re-use that to center content within the button as well:
<div class="flex justify-content-center">
<button pButton type="button" label="Submit"></button>
</div>
<button class="ui button" #click="beforeAdd">添加</button>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class="description">
<p>Description</p>
</div>
</div>
<div class="actions">
<div class="ui negative right labeled icon button">
取消
<i class="remove icon"></i>
</div>
<div class="ui positive right labeled icon button">
提交
<i class="checkmark icon"></i>
</div>
</div>
</div>
view methods:
beforeAdd(){
const modal = $(this.$el).find('.ui.modal')
console.log(modal)
modal.modal('show')
}
first click,modal show, second click nothing happened, I found semantic change modal to root for div class='ui dimmer modals page transition hidden',how can solve it
Semantic is removing it from your $(this.$el) so next time it does not find it.
It works when you use with global $ and an id:
show(){
const showModal = $('#mymodal')
console.log(showModal)
showModal.modal('show')
}
See Updated fiddle.
If you also want to use Vue variables in your modal, it is necessary to clone the modal and only show the cloned version.
With this approach Vue will still be able to keep track of the original modal, because Semantic doesn't remove it from the DOM.
beforeAdd(){
const modal = $(this.$el).find('.ui.modal').clone()
console.log(modal)
modal.modal('show')
}
I am displaying font awesome icons in row. when I click an icon it takes an action. and also I was trying to seelct an icon then it should show the option,when I click the option it should take an action.
Here is my code.
<div class="iconsInfo">
<div>
<div ng-if="isReply()" ng-click="replyMessage()" class="iconRow" title="Reply">
<i class="fa fa-reply"></i>
</div>
<div ng-if="isReplyAll()"ng-click="replyAll()" class="iconRow" title="Reply All">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="isForward()" ng-click="forwardMessage()" class="iconRow" title="Forward">
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeleted()" ng-click="deleteMessage()" class="iconRow" title="Delete Message">
<i class="fa fa-trash"></i>
</div>
<div ng-show="canMoveToFolder()" class="iconRow">
<i class="fa fa-folder-o"> </i>
</div>
Here when I click on reply icon it calls replyMessage .when I click on folder icon it should show the options like sentToFolder1,sentToFolder2,when I click senttoFolder1 it calls an action. how to achieve this using fontawesome icons.
Using a button over a div would be a solution:
<button ng-if="isReply()" ng-click="replyMessage()" class="iconRow" title="Reply">
<i class="fa fa-reply"></i>
</button>
You may need to change your iconRow class a bit, depending on what it is. Based on the name, I imagine perhaps the wrapper would be a good place for the iconRow styling.
I have two scenarios with similar problems. I'm attempting to add a font awesome icon:
Inline with a text input and 'add on' button, yet superscript (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (JSFiddle2)
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
Here's how I'd like each to look:
I don't know if this is important, but as a side note:
In the first scenario, the icon has a popover
In the second scenario, the icon has a dropdown
I don't think these have any effect on the layout, so I left out the related code.
For the first problem, your HTML structure is wrong. You need to add the icon inside the input-group DIV. Also to do superscript, you need a CSS class for that. Here is the update code for you:
JS Fiddle
For your second problem, your DIV must be displayed inline with a flotation. Here is the CSS for it:
.dropdown {
display:inline-block;
float:right
}
For your first issue: JS Fiddle
For your second issue as Raed N. said before just add a float:right to your dropdown:
.dropdown { float:right; }
Check that plunker example:
Plunker
<body ng-app="app">
<div class="flexbox margin-top">
<div class="flexible"></div>
<div class="flexbox">
<button class="btn btn-sm btn-success" popover-template="'template.html'" popover-placement="left">Click</button>
</div>
</div>
<script type="text/ng-template" id="template.html">
<div>
<textarea>Some text, some text, some text</textarea>
<button class="btn btn-sm">Update</button>
</div>
</script>
When I click the button, popover shows up at the left top corner of the page for a short time than it goes to its correct position. How can I prevent that flicker?
A possible solution is to integrate angular-animate to enable the fade-in. Just insert <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> into the head and register the module in your script.js: angular.module('app', ['ui.bootstrap', 'ngAnimate']);
See a demo here: http://plnkr.co/edit/NJU9F9ETHe2qMczY8knl?p=preview
Hope it helps!