I am using vuejs2 for my webapp with bootstrap.
I have two blocks with v-if and v-else, so only one of those renders. I have bootstrap button in each of these blocks. When I press the button from first of div, second div becomes visible and vice versa.
Problem is when I click button of first div, button of second div appears, but still it is focussed, I want to have a normal button, but it is focussed with outline.
Here is simplified code:
<div id="app">
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary">
<span>Second</span>
</button>
</div>
<br> <br>
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span>Switch</span>
</button>
</div>
Here is working fiddle, if you press first button, second still shows outline.
I missed this: key in v-if/else in docs. Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. It seems in my case as well it is using the same component and re-rendering it completely.
To fix it I just need to add key field in each button, like following:
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc" key="first">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary" key="second">
<span>Second</span>
</button>
</div>
Updated fiddle here.
Related
I'm trying to stick two texts horizontally inside a button by using Bootstrap 4.
The word "Link" is always pushed to the next line and I want it to be next to "Copy".
I've tried using Float but it pushes "Link" too far to the right.
<div className="col-3 w3-button w3-tiny">
<button
onClick={() => {
this.copyReferralLink();
}}
className="btn btn-block btn-primary"
>
{this.props.t("Copy")}
<span className="d-none d-sm-block btn-primary float-right">
{this.props.t("link")}
</span>
</button>
</div>
This is what I have so far, any help is appreciated!
You'd use d-sm-inine-block instead of d-sm-block class.
Additionally you might want to wrap this.props.t("Copy") into a span of its own.
I have a JSFiddle here: https://jsfiddle.net/cwgofr84/1/
with the following html:
<div class="container">
<h3>Tooltip Example</h3>
<button class="btn btn-default" data-toggle="tooltip" title="Hover 1">Hover over me 1</button>
<button class="btn btn-primary" data-toggle="tooltip" title="Hover 2">Hover over me 2</button>
<button class="btn btn-info" data-toggle="tooltip" title="Hover 3">Hover over me 3</button>
</div>
where I have three buttons, if I drag one of the buttons so the tooltip displays and then drop and then hover over a different button, it doesn't hide the first tooltip and displays the second. like so:
Is there a way to stop this from happening?
please change your script to:
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
});
I'm getting mad about this.Long story short :
This is the show-cart.php where cart is shown.
When i click Remove button , the event I call works 1 over 10 times about.Below it's the simple code.What's wrong? Why it's not working properly?
<button type="button" class="btn btn-danger">
<span onclick="alert('smth')"; class="glyphicon glyphicon-remove""></span> Remove
</button>
This is my console
Try putting the onclick function on the button element instead of span. The following snippet shows this along with some other cleanup in your code.
<button type="button" class="btn btn-danger" onclick="alert('smth')">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
I need this time a help with this example:
DEMO
You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)
On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).
But when i press the button, when i click out i back to the first state (don't press)
<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">
<div class="row" ng-repeat="company in vm_login.decimals">
<button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
</div>
Can anybody help me?
I got a final version and this is how i need
DEMO
Thanks for all
<div class="btn-group-vertical" >
<button ng-repeat="value in vm_login.options"
class="btn btn-primary"
type="button"
ng-model="vm_login.model"
btn-radio="value.id">
{{value.desc}}
</button>
</div>
<p>texto aqui: {{vm_login.model}}</p>
This worked for me try this approach in one line without using buttons:
<div class="btn-group">
<label class="btn btn-primary" ng-repeat="company in vm_login.decimals" ng-model="radioModel" ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
</div>
The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:
<div class="btn-group-vertical" data-toggle="buttons-radio">
<button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview
<div >
<div>
<h3 style="display:inline-block;">Comments</h3>
<button id="add_button" style="display:inline-block;margin-left:240px;" type="button" class="btn btn-primary" onClick="$('#add_button').hide()" data-toggle="collapse" data-target="#comments">Add</button>
</div>
<div id="comments" class="collapse in">
<textarea style="resize:none;width:90%;" class="input xlarge" rows="4" id="comment-box" name="comment-box" placeholder="Type your comment here..."></textarea>
<button style="margin-right:30px;" id="submit_comment" class="btn btn-primary pull-right" name="submit_comment" type="submit" onClick="">Submit</button>
</div>
</div>
So this my code. I have a collapsable element from bootstrap and I am trying to have it start off collapsed in the page but trying multiple different methods I can't. I've used a couple of jQuery commands like hide() and collapse but none of them seem to work. Any ideas on how to get this to work?
Simply removing the in class from the id='comments' div as I've shown in this JSFiddle allows for the comments textarea to appear on clicking the add button:
http://jsfiddle.net/JHkHE/1/