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> : ""}
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 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..?
<button class="footer-bar-item item-right button button-clear" ng-hide="taskDetails.task_id == '2044'">
<button class="button" ng-click="addNote(taskDetails.task_id)">Add Note</button>
</button>
taskDetails.task_id value is String and its value is equal to "2044".But button not hides.I'm new to Ionic.I'll grateful if someone can help me to resolve this.
Based on your code snippet, those quotation marks aren't parsable.
Change
ng-hide=”taskDetails.task_id == '2044'”
to
ng-hide="taskDetails.task_id == '2044'"
finally I found solution.
<button class="footer-bar-item item-right button button-clear" >
<button ng-hide="taskDetails.task_id == '2044'" class="button" ng-click="addNote(taskDetails.task_id)">Add Note {{taskDetails.task_id == '2044'}}</button>
</button>
I'm using angularjs 1.6 and required to use a specific css library that will disable a button if the button is defined like:
<button disabled="">
My button
</button>
And will enable the button if defined:
<button disabled="">
My button
</button>
I'm trying to enable/disable it based on the latest value from a property in a service within my controller, but the button is always showing as enabled even if someProperty is defined or not .. any ideas?
<button {{ ctrl.myService.getData().someProperty ? '' : 'disabled=""' }}>
My button
</button>
We can achieve this using ng-disabled attribute. SO it's like:
<button ng-disabled="ctrl.myService.getData().someProperty ? true : false">
My button
</button>
Let me know if it helps.
Try using
<button ng-disabled="ctrl.myService.getData().someProperty ? 'disabled': '' ">
My button
</button>