I tried to implement select2 plugin using the Bulma css framework but it seems messy in frontend. I tried this using bootstrap and yes there's no problem since select2 has a bootstrap compatibility.
HTML:
<div class="field">
<label class="label">Role</label>
<p class="control">
<span class="select is-fullwidth">
<select2 v-model="form.role"
placeholder="Select Role"
name="role"
:value="form.role"
:multiple="false"
>
<option></option>
<option v-for="role in roles" :value="role.id">{{ role.display_name }}</option>
</select2>
</span>
</p>
</div>
I made it work, maybe my example can help you.
View
<div class="field">
<label class="label">Hair</label>
<div class="control">
<select2 class="is-medium" v-model="post.custom_data.hair" :options="{}">
@foreach (config('post.cat.hair') as $id => $value)
<option value="{{ $id }}">{{ __($value) }}</option>
@endforeach
</select2>
</div>
</div>
SASS
.select2-wrapper {
.select2-container {
.select2-selection {
transition: border-color $speed;
font-family: $family-sans-serif;
height: 2.285em;
line-height: 1.5;
font-size: 1rem;
outline: none !important;
display: inline-flex;
align-items: center;
width: 100%;
border-color: $border;
border-radius: $radius;
&:hover {
border-color: $border-hover;
}
.select2-selection__rendered {
padding-left: 0.75em;
padding-right: 0.75em;
}
.select2-selection__arrow {
display: none;
}
}
&.select2-container--open {
.select2-selection {
border-color: $primary;
&:hover {
border-color: $primary;
}
}
}
}
&.is-medium {
.select2-container {
.select2-selection {
font-size: $size-5;
}
}
}
&.is-large {
.select2-container {
.select2-selection {
font-size: $size-4;
}
}
}
}
.select2-container {
.select2-dropdown {
border-color: $primary;
.select2-search {
margin: 10px;
.select2-search__field {
@extend .input;
border-radius: $radius !important;
}
}
.select2-results__options {
max-height: 210px;
.select2-results__option {
padding: 0.75em;
font-family: $family-sans-serif;
font-size: 1rem;
&.select2-results__option--highlighted {
background: $primary;
}
}
}
}
}
Result
Hope it helps ^^
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With