I have a
<button
class="tw-text-btn test-work-btn"
translate translate-attr-name="add_food"
ng-click="add_food()"
ng-show="Permissions.allowed">
<i class="icon-add-food"></i>
</button>
which works perfectly if Permission.allowed is true, button will show.
However, same thing does not work in this case:
<button
class="btn"
title="{{'remove_food'|translate}}"
ng-show="Permissions.allowed"
ng-click="removefood($event, u)">
<i class="icon-cancel"></i>
</button>
also side note, in second case if i have food.$attributes.favfood_id !== myself i should use ng-if="food.$attributes.favfood_id !== myself && Permissions.allowed"
but it still does not work even in that case, what am I missing..?
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 use onclick event like below
<button className="mini ui button" onClick={this.view(item['id'])}>
<i className="user icon"></i>
View
</button>
This is creating error like below
But below code is not creating error
<button className="mini ui button" onClick={this.view}>
<i className="user icon"></i>
View
</button>
Change it to onClick={() => this.view(item['id'])}, otherwise the function gets executed immediately during rendering (instead of onClick), which causes repeated re-rendering if the function changes the state/props.
Yes you can use arrow function as previews answer or you can use bind
<button className="mini ui button" onClick={this.view.bind(this, item['id'])}>
<i className="user icon"></i>
View
</button>
These two ways works.
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 having problems getting a responsive bootstrap button in React. The button is designed the way I expected, but completely unresponsive. Any ideas?
{numUsers > 1 && this.props.phase === "Game Over" ? <button onClick
{this.props.deal} type="button" className="btn btn-
primary">Deal</button> : ""}
Try this. If that solves your problem, google Javascript operator precedence for explanation.
{(numUsers > 1 && this.props.phase === "Game Over") ? <button onClick
{this.props.deal} type="button" className="btn btn-
primary">Deal</button> : ""}
before posting here i searched and searched and i found several solutions for applying tooltips to disabled buttons, anyway none of these was using uib-tooltip from angular ui bootstrap.
Here is the code of my button:
<button class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</button>
Do you know how to make tooltip displayable even when the button is disabled?
Similar to janosch's solution - wrap your button in a div which has the tooltip attribute.
<div uib-tooltip="{{ isDisabled ? 'Button is disabled' : '' }}">
<button disabled="isDisabled">Button</button>
</div>
The tooltip will only be visible when the variable isDisabled is true, which also sets the disabled status of the button.
This solution will also work if you are using the title attribute instead of uib-tooltip
I don't think it's possible on a button, but it works if you use link disguised as a button, instead of a button:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="doThat()">Click Here
</a>
Simplest, least intrusive solution to this is:
<a class="btn btn-default"
uib-tooltip="My tooltip text"
tooltip-append-to-body="true"
ng-disabled="!isAllSelected"
ng-click="isAllSelected ? doThat() : null">Click Here
</a>
(notice conditional ng-click, without which clicks will still go through even when anchor is "disabled" - i.e. anchors don't support disabled attribute)
I know this question is several years old however someone might find useful this workaround.
What I did was to wrap the button content in a <span> tag and apply the uib-tooltip to it:
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true"> Button text<span>
</button>
If you also need the tooltip to be shown when the user hovers over the whole button area, you can also remove the button padding and add it to the <span> instead.
<button type="button" class="btn btn-primary" ng-click="foo()" ng-disabled="true" style="padding: 0px !important;">
<span uib-tooltip="Tooltip text" tooltip-append-to-body="true" style="display:inline-block; padding: 5px 10px;"> Button text<span>
</button>
Irrespective of button being enabled or disabled, I am getting the uib tool tip. The below code is working fine for me.
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" ng-disabled = "true" uib-tooltip="After today restriction" >Min date</button>
Please see this plunker
Added screenshot of tooltip
Additional notes: You can also configure the position of tooltip. All you need to do is to take the help of $uibTooltipProvider. We can then use config section to achieve the result. Below code is included in the plunker.
angular.module('ui.bootstrap.demo')
.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
$uibTooltipProvider.options({
'placement':'bottom'
});
}])