I tried to implement the form select vue bootstrap component but it does not seem to work. On their page (https://bootstrap-vue.org/docs/components/form-select) in the section multiple select support it is suggested to use the prop to enable multiple selections. However, in my application as well as in the snippet on the mentioned website, I can only select multiple items while holding control or keeping the mouse button clicked. That is very unintuitive and I want to implement a select where numerous items can be selected by just clicking once without holding additional buttons. Does anyone know how to fix this ?
Related
I would like to implement a dropdown component that shows the selected options upon expanding.
Here is what I have so far, but it tokenizes the selected options, which I don't want. I want them to look similar to a single selection dropdown where they are just shaded/highlighted, but there can be multiple selected.
<Dropdown
text="Filter"
icon="filter"
className="icon"
fluid multiple selection labeled button
options={filterOptions}
/>
As you noticed, Semantic doesn't (currently) support a whole lot of customization regarding multi-select. So, you have two basic options. First, you could use the subcomponents implement the details of dropdown yourself (including all the events that get fired) and only rely on Semantic for the styling. If you choose this route, you might as well write your own.
Alternatively, you can hack together a solution using some Semantic's built-ins.
To do this, you need to change two main behaviors:
1st - you need hide the tags. You can do this by modifying the renderLabel method on the dropdown. Returning null from that method will prevent the tags from being rendered.
2nd - you need to unhide the selected options in the dropdown. There's no built-in way to do this, but you can fake it by inserting a new duplicate option for every option selected. Make sure you attach an onClick to allow deselecting of objects.
Here's a working example: https://stackblitz.com/edit/so-49442592
There's a lot of quirks to it, so feel free to ask questions!
I need to use a tab component of some sort and was looking at jquery-ui. It's already in the project I'm working on. But I don't want to have separate content divs as the controls for the content of each tab are all the same. Basically the UI includes a dropdown, a couple of text boxes and some radio buttons. The only thing dynamic are the items in the dropdown, captions for text boxes, etc. So I merely need to update these when I get a tab click event. The number of tabs is unknown until the component is initialized and the tabs are added dynamically.
Is there a way to do use the jquery-ui tabs control in this manner? In other words, without content divs? When I tried it this way, the tabs don't behave as expected (active tab color, etc., don't work as they normally do).
https://angular-ui.github.io/bootstrap/ with the Static arrays example in the Typeahead section...
If I wanted to do something like being able to select multiple states, one after the other, how would I add that into the Typeahead code? Also, is there anyway that when I click the input - it shows all the selections possible with a scroll bar?
Edit: I really like this one however it doesn't allow for multi-select: http://ghiden.github.io/angucomplete-alt/
Here is what I ended up using: https://github.com/tamtakoe/oi.multiselect
try to use chosen:
chosen at github
Chosen works very well with angular and css frameworks, because chosen only hide your original multiselect component, without affect DOM parts.
I have a ListBoxFor and the first item is All Values. I already have the list box set to allow multiple selections. I would prefer to make it so that if a user selects the All Values option they are either asked if they want to clear out all other selections (Use All Values) or keep their current selections (De-select All Values). I would be ok without the user dialog asking them what to do and just automatically clearing out selections, but that is less preferable.
At first glance it seems that Javascript/jQuery is the best route to go about for this. I wanted to check to see if anyone knew of built in functionality for ListBoxFor that does this. The other option that I see is building a custom html extension. Even with this I still only see JS/jQuery being built and auto generated.
I have a very complicated Javascript/JQuery Leaflet map. There is supposed to be a Leaflet control with a dropdown select box. The select box pulls it's content via AJAX. It pulls the content correctly and the generated HTML is fine and can be seen. If I use the keyboard to highlight the select menu, I can use the arrow keys to change the value. However, I can't click on the select menu and see the drop down box. The click is being captured fine(checked with JQuery .click()).
I can't share the specific code because I'm not sure what's wrong and I can't share the whole thing because of security issues. So, my question is a little more general:
What kinds of errors/bugs should I be looking for if a select dropdown menu is not showing on click? What are various things I can check to see what is wrong?
Thanks.
Nevermind - known issue with Leaflet. Custom Control not working