Форумы портала PHP.SU :: Версия для печати :: chosen select input нулевой ширины если он на скрытой bootstrap закладке

1. mstdmstd - 31 Июля, 2019 - 15:16:25 - перейти к сообщению

Всем привет,
В laravel 5.8 / Bootstrap v4.1 / jquery jQuery v3.3 приложении я использую chosen select input с инициализацией вида:

CODE (javascript):
скопировать код в буфер обмена

    $(".chosen_select_box").chosen({
        disable_search_threshold: 10,
        no_results_text: "Nothing found!",
        allow_single_deselect: true,
    });
 

И это работает везде за исключением страниц с табами вида:

CODE (html):
скопировать код в буфер обмена

                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item">
                                        <a class="nav-link @if( $active_tab == 'common_settings' || empty($active_tab) ) active @endif" id="settings-common-settings-tab" data-toggle="pill"
                                           href="#settings-details"
                                           role="tab" aria-controls="settings-details"
                                           aria-selected="true">Common settings
                                        </a>
                                </li>
                                <li class="nav-item">
                                        <a class="nav-link @if($active_tab == 'site_content') active @endif" id="pills-settings-site-content-tab" data-toggle="pill" href="#pills-settings-site-content"
                                           role="tab" aria-controls="pills-settings-site-content"
                                           aria-selected="false">Site content
                                        </a>
                                </li>
            ...
                        <div class="tab-content " id="pills-tabContent">
                                <div class="tab-pane @if($active_tab == 'common_settings' || empty($active_tab)) active @endif" id="settings-details" role="tabpanel"
                                     aria-labelledby="settings-common-settings-tab">
                                        @include($current_admin_template.'.admin.settings.common')
                                </div>
                                <div class="tab-pane @if($active_tab == 'site_content') active @endif" id="pills-settings-site-content" role="tabpanel"
                                     aria-labelledby="pills-settings-site-content-tab">
                                        @include($current_admin_template.'.admin.settings.site-content')
                                </div>
 

Если chosen select input находится на невидимой при открытии закладке то он невидим.
Посмотреть можно тут http://votes[dot]my-demo-apps[dot]tk/admin/settings (пароль отображается на странице логине) :
Есть 2 одинакаовых chosen select input - а “Feed import creator id *”
Но если на открываемой по умолчанию закладке он видим
то на закладке “News” он нулевой ширины : https://imgur[dot]com/a/sh1Zit5
Если при открытии сделать закладку “News” активной то этот chosen select input отображается нормально,
но chosen select input на первой невидимой закладке нулевой ширины

Я добавил код на событии смены закладки

CODE (javascript):
скопировать код в буфер обмена

        $('#pills-tab a').on('click', function (e) {
            setTimeout(function() {
            $(".chosen_select_box").chosen({
                disable_search_threshold: 10,
                no_results_text: "Nothing found!",
                allow_single_deselect: true,
            });
        }, 1000);
 