[英]Select2 placeholder UI breaking
如果您看到屏幕截圖,當我為多個選擇框使用 select2 的占位符時。 當我從選擇框中選擇一些東西時它工作正常,但是當我看到默認占位符時。
我在做什么:我需要為 select2 框顯示一個占位符,如何解決這個高度問題?
$('#search_user_events').select2({
placeholder: 'Select events',
multiple: true,
allowClear: true,
dropdownAutoWidth: true,
width: '100%'
});
<select class="form-control" id="search_user_events" name="search_user_events">
<option></option>
@foreach($events as $key => $event)
<option value="{{$event->id}}">{{$event->name}}</option>
@endforeach
</select>
您的問題取決於第一個選項:默認情況下為空並選中....
您可以將translateY()與.toggleClass( function [, state ] )結合起來改變事件:
$('#search_user_events').select2({ placeholder: 'Select events', multiple: true, allowClear: true, dropdownAutoWidth: true, width: '100%' }).on('change', function (e) { $('.select2-search__field').toggleClass('mcenter', $(this).val().length <= 1); }).trigger('change');
.mcenter { transform: translateY(-60%); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> <select class="form-control" id="search_user_events" name="search_user_events"> <option></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.