Bulma: <select multiple> support

Created on 21 Jun 2016  路  7Comments  路  Source: jgthms/bulma

Checklist

  • [x] This is about Bulma the CSS framework and not about the Bulma website
  • [x] I'm using Bulma version 0.0.28
  • [x] My browser is: 51.0.2704.84 (64-bit)
  • [x] I am sure this issue is not a duplicate?

    Description

Bulma currently doesn't seem to properly support <select>s with the multiple attribute. That, or I can't just seem to find it in the documentation.

bulma feature

Most helpful comment

All 7 comments

What kind of support should be offered here?

  • Remove the green caret-down
  • Make the default height of the select element taller for multiple selects?

Pitching in here, but shouldn't we at least have Bulma not interfere with the selects by default (using a :not([multiple]) I'd guess), until it's supported?

@jpmurray just dont wrap ur select in <span class="select">

I've made this little bit of css, designed to work with bulma vs changing it. It doesn't but probably should make use of any defined variables.

(excuse the ng bindings)

select[multiple].multi-select {
    all: initial;
    font: inherit;
    overflow-y: auto;
    border-radius: 3px;
    padding-bottom: 0.5em;
    padding-left: 0.625em;
    padding-top: 0.5em;
    background-color: white;
    border: 1px solid #dbdbdb;
    color: #363636;
    cursor: pointer;
    display: block;
    outline: none;
    padding-right: 2.5em;
}

select[multiple].multi-select:active, select[multiple].multi-select:focus {
    border-color: #00d1b2;
}
<div class="field">
                            <label class="label">Place</label>
                            <p class="control">
                                <select class="multi-select" multiple="multiple" name="place" ng-model="vm.place" ng-required="true" ng-options="place.id as (place.name + ' ' + place.shortDescription) group by place.company.name for place in vm.places|orderBy:'name'">                                        
                                </select>
                            </p>
                        </div>

image

Optgroup usage doesn't appear in the example. Has it been considered? @jgthms

image

This feature seems to be broken. Will only select one item at a time.

Yeah this isn't working for me either. Even the live example on Bulma's website doesnt work for me on Chrome or Firefox.

EDIT: I just realized, to use it you have to either click and drag over multiple options, or hold control and click on multiple options like you would while highlighting files. That's weirdly difficult to use. Not bulma's fault.

Was this page helpful?
0 / 5 - 0 ratings