Using Bootstrap, Angular and ui-bootstrap I'm creating a bunch of radio buttons which look like normal buttons (working plunker here).
I now want to make the active button blue (.btn-primary) and the rest white (btn-default). I found some SO-answers which explain how to conditionally apply a class here. I tried implementing this technique like so (Plunker here):
<div class="btn-group">
<label class="btn" ng-class="{btn-primary: radioModel=='Left', btn-default: radioModel!='Left'}" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn" ng-class="{btn-primary: radioModel=='Middle', btn-default: radioModel!='Middle'}"ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn" ng-class="{btn-primary: radioModel=='Right', btn-default: radioModel!='Right'}"ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
Unfortunately it doesn't seem to work. Does anybody know how I can achieve the active button to be a btn-primary and the other ones being a btn-default? All tips are welcome!
You are missing quotes around css classes btn-primary and btn-default. You need quotes because there is a dash in the property of the object.
See edited plunker
Related
So basically, I have a vue web app and created a container with multiple bootstrap cards. The cards have a button, which collapses a form I've made for guests to apply. However, when I press the button of a card, it collapses the apply form of all cards at once. To fix that, I have to give each individual card a specific id which matches the data-bs-target and aria-controls of the button. So far, so good.
I've made a variable card_id and inserted it into the attribute values with v-bind, but it's not working. The reason is, that the attribute data-bs-target needs a hashtag before the actual variable name, but I can't figure out a way to do that.
Code sample:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="card_id" aria-expanded="false" :aria-controls="card_id">Apply now!</button>
<div class="collapse" :id="card_id">
<div class="card card-body">
<GuestForm></GuestForm>
</div>
</div>
I obviously can't just put a hashtag in front of the variable, so what is my next best solution for this?
Thank you in advance.
You could use the string template with backticks `` like:
<button :data-bs-target="`#${card_id}`"
I'll try my best to explain what is going on as it is quite strange. Previous to making some changes on our website (this wasn't touched) this worked perfectly I am currently having 2 unexpected errors with Radio buttons in JQuery when I use .buttonset()
We currently have a multistep form, on the second step we use details from the first step to provide a list of service providers to the client where they can select which one they would like to use.
We use ajax to return HTML that is placed inside radio-group div. Example of HTML below:
<input type="radio" value="1" name="cleaner-select" id="cleaner-select-1" class="cleaner_selection ui-corner-left">
<label for="cleaner-select-1" class="cleaner-selection-box col-md-2 col-xs-12">
<div class="col-md-12 col-xs-12 center fivepxpad">
<button type="button" class="btn btn-default btn-primary" onclick="view_profile(1)"> View Cleaner Profile <span class="btn-icon-right icon-circle-right"></span></button>
</div>
<div class="col-md-12 col-xs-12 cleanerproducts">
<span class="icon green icon-leaf fontsize16"></span> Eco / Natural Products
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-shield cleanerverified"></span> Verified
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-location"></span> Close-By
</div>
</label>
This is placed inside a DIV below:
<div id="radio-group" class="center">
</div>
Using this JQuery
$('#radio-group').html(result[1]);
$('#radio-group').buttonset();
Current Errors:
When buttonset is called the values of all the radio inputs are removed. eg. changes from value="1" to just value. This didn;t previously happen, I know buttonset is causing this because when I remove $('#radio-group').buttonset(); the value stays just fine (no error in HTML).
When buttonset is applied to the parent div "radio-group" it receives ui-buttonset class as expected but nothing else happens, the input radio buttons are still visible, the colours aren't showing when selected and the labels stay white (meant to be a slight grey colour) but when the labels are clicked on the correct raido input is selected.
On our last update we joined a few CSS files and JS files together but kept everything in the same order that it was previously loaded in. This was to reduce the amount of calls we had to make and everything else is working fine so not entirely sure this is causing it. We also get no console errors.
Things I've tried:
Changed $('#radio-group').buttonset(); to $('#radio-group').button();
Called $('#radio-group').buttonset(); in document.ready and tried $('#radio-group').buttonset('refresh); when HTML changes
$('#radio-group').buttonset('refresh); by itself
Double checked all CSS and JS. (JQuery-UI .js and .css is included)
I'm about to try switching back to our old header and footer files (where more calls are made) to see if that fixes it but if anyone knows what is going on, any help / ideas / advice would be appreciated.
I can't seem to find anyone with a similar issue and I've been working in this for hours it's doing my head in. If you need anymore info let me know.
I am new to angular js and bootstrap. I have a requirement that i need to implement a popover on hover or click and the user should be able to edit the tooltip. Could you suggest an approach to implement it.
Hover over me
I am open to any other approach also.
Check the angular-ui-bootstrap - project, specifically the popover directive:
https://angular-ui.github.io/bootstrap/#/popover
You will need to add the angular-ui-bootstrap scripts to index.html, along with the regular bootstrap css - there is a CDN for this:
https://cdnjs.com/libraries/angular-ui-bootstrap#
After adding the above 2 scripts (min or unminified) and the bootstrap.css file to index.html - you must add angular-ui-bootstrap to your apps bootstrap process like:
angular.module('myModule', ['ui.bootstrap']);
At that point you are ready to use the popover - for instance on mousenter:
<button uib-popover="This popover appeared on mouse enter!"
popover-trigger="'mouseenter'"
type="button"
class="btn btn-default">Hover Over</button>
You can obviously make this dynamic - per your requirements - just like the examples in the docs:
<div class="form-group" ng-controller="MyController as vm">
<label>Popup Text:</label>
<input type="text"
ng-model="vm.popoverContent"
class="form-control"/>
<button uib-popover="{{vm.popoverContent}}"
popover-trigger="'mouseenter'"
type="button"
class="btn btn-default">Dynamic Hover Over</button>
</div>
How can I use IntroJs for different groups of element. Actually I want to use it for multiple part at same page. As per their documentation
For example introJs(".introduction-farm").start(); runs the
introduction only for elements with class='introduction-farm'
Now I tried with static id or dynamic Id but this part is not working. if I use introJs().start(); then It will work but now if on page I want to create three separate introduction then this method combine them into one. So anybody here able to successfully implement this. Then please share with me.
just add data-step, data-intro and data-position attributes to the grouped divs
e.g.
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'></div>
and then onclick just do introJs().start();
e.g.
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
for details:
https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html
Hello I am trying to use angular-strap to put together a multiselect drop down menu. For testing, I am just putting in some dummy data like so. THe issue is that the check mark on selected items displays on almost new line. I am not sure how to go about fixing it.
{value:'BLAH.09', label:'BLAH.09 '}
Couple of things to keep in mind:
1. The extra spaces in label are just a part of the troubleshooting process, it still doesn't work if they are there.
2. The reason the box is so wide in the screenshot is because I manually adjusted the width in css to see if it makes a difference, it doesn't..
Button looks like this:
<button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" placeholder="Category Filter" data-multiple="1" data-animation="am-flip-x" ng-options="val.value for val in display_data['fields']" bs-select> Action <span class="caret"></span></button>
Was missing an include to the main.min.css file.