I'm working with the latest version of Bootstrap v5.2 and Vue 3 (just for understanding).
I've found a similar question on Stackoverflow but this was with an older version of Bootstrap.
I have a select and I want to add my id of my element from my v-for as a badge (Documentation: https://getbootstrap.com/docs/5.2/components/badge/#pill-badges) in front of the upcoming text of my element.
My code:
<div class="row mt-3">
<div class="col-12">
<span>Select with Badge</span>
<select class="form-select" v-model="test_select_badge">
<option v-for="element in select_array" :key="element.id" :value="element.id">
<span class="badge text-bg-primary me-2">{{element.id}}</span>{{element.text}}
</option>
</select>
</div>
</div>
But this is not working out. How can I achieve my goal? Thank You.
I've used an dropdown and desigend it like a select. Than it worked out for me.
Related
apologize before if my English is not good, i have a problem when using bootstrap-select in vue. https://github.com/snapappointments/bootstrap-select
<select class="selectpicker" v-bind:class="{'is-invalid': error}"></select>
<span class="invalid-feedback"> error </ span>
the code above will be displayed as below (inspect element):
<div class="dropdown">
<select></select>
</div>
<span class="invalid-feedback"> error </ span>
it doesn't work when using vue, because the is-invalid appears in <select> and the <select> is inside the div element <div class = "dropdown">
"invalid-feedback" will appear under "is-invalid".
anyone have a solution?
You have to provide what are you binding .In your case you are binding a class.So make sure to use v-bind:class="{'is-invalid': error}"
This should work. span with invalid-feedback class should be below the select tags.
<div class="dropdown">
<select></select>
<span class="invalid-feedback"> error </ span>
</div>
I am trying to load a dropdown with angularjs and semantic UI with the following code
<div id="state" class="ui search selection dropdown">
<label for="state">Estado</label>
<input type="hidden" name="state">
<i class="dropdown icon"></i>
<div class="default text">Selecione o Estado</div>
<div class="menu" ng-model="state" ng-change="loadCity()">
<div ng-repeat="state in states" class="item" data-value="{{state.ID}}">{{state.NAME}}</div>
</div>
</div>
<div>
But the event is not called.
When I use the code below it works:
<select id="state" class="ui search selection dropdown" ng-model="state" ng-init="loadState()" ng-change="loadCity(state.ID)">
<option ng-repeat="state in states" value="{{state.ID}}">{{state.NAME}}</option>
</select>
What am I doing wrong?
Looks like this is an issue other people have encountered. Take a look at this issue: https://github.com/Semantic-Org/Semantic-UI/issues/1913
I found a way to solve this issue on angular side using some 1.3 magic. It's not the best way of doing this but it works.
It can simply be solved by using the formController and a watch.
I updated the plnkr. Note that i use underscore.js to find the array index of the control inside the form.
The rest is pure angular and some jquery.
http://plnkr.co/edit/eDOej3zJ0bwQ1xyX1LDI?p=preview
Look at the section starting with:
app.directive('select'
I have a dropdown which i am trying to populate from the javascript. But i am unable to do it.
This is my HTML
<div class="ui fluid search selection dropdown values">
<input type="hidden" name="values" selectOnBlur={false}>
<i class="dropdown icon"></i>
<div class="default text">Select a category</div>
<div class="menu">
</div>
</div>
And this is the JS
$('.ui.dropdown.values').dropdown({values:[{name:"oi",value:32},{name:"yo",value:2}]})
Please find the codepen link below
CodePen
Thanks
Can be fixed by changing versions to:
https://code.jquery.com/jquery-3.2.1.min.js
https://cdn.jsdelivr.net/npm/semantic-ui#2.2.13/dist/semantic.min.js
Because the dropdown library's version you used didn't support populating via JS (as per docs)
I have a selected option in my select tag. The purpose of the selected tag is to display all the stores in the div tag underneath. I've been searching around and some suggest ng-selected, ng-init and ng-options, but I have no idea which one or how I should do it.
I've managed to sort the stores based on their category which you can find in the select tag, but I can't display all of them :/
Here's my code:
<select style="width:100px;" ng-model="selectedCategory.category" ng-options="category.id as category.name for category in categories">
<option ng-selected="{{}}" selected value="">Visa Alla</option>
<!-- {{ selectedCategory.category }} -->
</select>
<div class="row row-white" style="margin-bottom:10px" ng-click="browseShop(shop)" ng-repeat="shop in shops | filter:selectedCategory" ng-show="isAvailable(shop)">
<div class="col"></div>
<div class="col">
<img ng-src="{{shop.img}}" />
<br/>
<span style="color:black">{{getCategory(shop)}}</span>
</div>
<div class="col"></div>
</div>
Really thankful for all the help I can get!
Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.
If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.