I need to contruct the following
<button large></button>
<button larger></button>
I would like to do something like...
<!-- where items = ["large", "larger"] -->
<button ng-repeat="item in items" {{item.type}}>Whatever</button>
How would I go about this? I tried the above but it didn't seem to work
I would expect...
<button large class="ng-binding">Whatever</button>
<button larger class="ng-binding">Whatever</button>
but I get
<button {{item.type}} class="ng-binding">Whatever</button>
<button {{item.type}} class="ng-binding">Whatever</button>
As you can see the button fails to have the appropriate attr.
Related
I'm trying to incorporate Semantic-UI into my site due to some apparent limitations with react-strap. However, I've run into an issue. The content width is fixed, and therefore the rightmost button is getting slightly truncated.
I tried resizing per the docs:
<div>
<Button size='mini'>Mini</Button>
<Button size='tiny'>Tiny</Button>
<Button size='small'>Small</Button>
<Button size='medium'>Medium</Button>
<Button size='large'>Large</Button>
<Button size='big'>Big</Button>
<Button size='huge'>Huge</Button>
<Button size='massive'>Massive</Button>
</div>
But nothing seems to make a difference here the code:
<Button.Group>
<Button class="tiny ui button" positive as={Link} to={"/licenses/" + license.id}>Edit</Button>
<Button class="tiny ui button" color='blue' onClick={() => this.download(license.url)}>Download</Button>
<Button class="tiny ui button" negative onClick={() => this.remove(license.id)}>xDelete</Button>
</Button.Group>
Any ideas?
You need to use the same attribute as per the docs - instead of giving your buttons a class of tiny, it should be a size of tiny.
I am trying to disable a button on certain condition. I tried to use data-ng-class but when I change the tabs or switch between pages the buttons are getting activated intermittently. Would like to understand how can I achieve this feature.
<button type="button" class="btn btn-success" href="" data-ng-click="saveValueSellerBid(false);" data-ng-class="{disabled: currentQuote.acceptPricingSellerDisabled}">
<svg class="icon icon-checkmark"><title>Accept value seller offer</title><use xlink:href="#icon-checkmark"></use></svg>
<strong translate="Accept_Pricing_Seller_Offer"></strong>
</button>
Try this attribute instead:
ng-disabled="currentQuote.acceptPricingSellerDisabled"
I'm trying to make use of wj-popup inside an ng-repeat in an AngularJS application, but am having difficulty.
Basically, I've used the demo example for wj-popup and wrapped it in an ng-repeat as follows. I have an array of posts, each has a property that is its indexValue (post.indexValue).
Each button needs to have a different ID, so I expect that using post.indexValue should work, and it does set the button ID on each repetition correctly, but the calling function doesn't work and the popup doesn't appear, and I'm not sure what I'm doing wrong.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
Issue is with id. Pop up is not working even if there is no ng-repeat and owner id starts with any number. Changing button id to "btn{{post.indexValue}}" worked for me. Try this fiddle.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="btn{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#btn{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
I'm using Angular Bootstrap and want to have my tooltips trigger using a "hover" on desktop and "click" on mobile devices which can't hover but also have the tooltips close if you click outside the tooltip. I set it to tooltip-trigger="hover outsideClick" since "outsideClick" is now a supported trigger (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), however this breaks the tooltip completely so even the hover doesn't work.
<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>
Is there any way to make these work together?
If I just use tooltip-trigger="hover click" it's decent, but on mobile I can only close the tooltip by clicking the item again, versus being able to click elsewhere on the page to close it.
Have you tried tooltip-trigger="mouseenter outsideClick"?
It seems likehover is not mentioned in the doc.
I think what you're looking for is the tooltip-trigger="hover focus", the focus will act as the outsideClick, closing the tooltip on the next click that the user makes. I've personally used this and it works great both for mobile and desktop.
It actually defaults to hover focus so you shouldn't even have to add them manually.
If there is any chance you can use the native bootstrap library? As it supports what you are looking for by default.
I have created a jsfiddle demonstrating this(please view it on your mobile device to see the tootlips working as expected)
HTML:
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
JS:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
You can read up on it here, as a side note, you have to manually enable the tooltip
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
I am testing angularJS and ui-bootstrap tooltips :
http://angular-ui.github.io/bootstrap/#/tooltip
What I want to achieve is a tooltip with some working buttons inside.
I have tried :
<input type="text" value="{{activity.name}}"
tooltip-html-unsafe='<button class="btn btn-primary btn-mini" ng-click="addChild(activity)">+</button>
<button class="btn btn-danger btn-mini" ng-click="remove(activity)">X</button>
<button class="btn btn-danger btn-mini" ng-click="removeChildren(activity)" ng-show="activity.children.length > 0">X children</button>'
tooltip-trigger="focus"
tooltip-placement="right" />
Which is ugly and does not work. The buttons are rendered but do not execute the 'ng-click'.
Is there some way I can tell the tooltip to fetch a partial and keep the ng-click functional ?
Tooltips that would contain "live" HTML (with AngularJS directives working etc.) are not supported in the current (0.5.) version of http://angular-ui.github.io/bootstrap/#/tooltip
You might want to open a feature request for this in https://github.com/angular-ui/bootstrap/issues?state=open