Add size prop to Searchable component for defining max-height of list with selectable items
MODIFY
resources/assets/js/components/Searchable.vue
resources/assets/js/components/Searchable.vue
<span v-if="!selected">Select</span>
<span v-else v-html="selected.label"></span>
</div>
+ <div class="searchable__container">
<div class="searchable__list" v-if="shown">
<input type="search" v-model="query" placeholder="Search" ref="query" />
- <ul>
+ <ul :style="{ 'max-height': size * 50 + 'px' }">
<li
class="row"
v-for="item in queriedItems"
</ul>
</div>
</div>
+ </div>
</template>
<script>
export default {
- props: ['name', 'items', 'initial'],
+ props: {
+ name: String,
+ size: { type: Number, default: 4 },
+ items: Array,
+ initial: String
+ },
data() {
return {

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -79,8 +79,16 @@ canvas {
}
}
- &__list {
+ &__container {
+ position: relative;
margin-top: 10px;
+ }
+
+ &__list {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
background: $colors-light-body;
border: 1px solid $colors-light-border;
border-radius: $dimensions-box-border-radius;
@@ -100,7 +108,6 @@ canvas {
ul {
overflow-y: scroll;
- max-height: 200px;
li {
padding: 10px;

MODIFY
resources/views/register.blade.php
resources/views/register.blade.php
</div>
<div class="input">
<label>Currency</label>
- <searchable name="currency" :items='@json($currencies)' initial="{{ old('currency') }}"></searchable>
+ <searchable
+ name="currency"
+ size="2"
+ :items='@json($currencies)'
+ initial="{{ old('currency') }}"></searchable>
@include('partials.validation_error', ['payload' => 'currency'])
</div>
<button class="button">Register</button>

Add size prop to Searchable component for defining max-height of list with selectable items