PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
mstdmstd
Отправлено: 31 Июля, 2019 - 15:16:25
Post Id


Частый гость


Покинул форум
Сообщений всего: 147
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Всем привет,
В laravel 5.8 / Bootstrap v4.1 / jquery jQuery v3.3 приложении я использую chosen select input с инициализацией вида:
CODE (javascript):
скопировать код в буфер обмена
  1.     $(".chosen_select_box").chosen({
  2.         disable_search_threshold: 10,
  3.         no_results_text: "Nothing found!",
  4.         allow_single_deselect: true,
  5.     });
  6.  

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

CODE (html):
скопировать код в буфер обмена
  1.                         <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  2.                                 <li class="nav-item">
  3.                                         <a class="nav-link @if( $active_tab == 'common_settings' || empty($active_tab) ) active @endif" id="settings-common-settings-tab" data-toggle="pill"
  4.                                            href="#settings-details"
  5.                                            role="tab" aria-controls="settings-details"
  6.                                            aria-selected="true">Common settings
  7.                                         </a>
  8.                                 </li>
  9.                                 <li class="nav-item">
  10.                                         <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"
  11.                                            role="tab" aria-controls="pills-settings-site-content"
  12.                                            aria-selected="false">Site content
  13.                                         </a>
  14.                                 </li>
  15.             ...
  16.                         <div class="tab-content " id="pills-tabContent">
  17.                                 <div class="tab-pane @if($active_tab == 'common_settings' || empty($active_tab)) active @endif" id="settings-details" role="tabpanel"
  18.                                      aria-labelledby="settings-common-settings-tab">
  19.                                         @include($current_admin_template.'.admin.settings.common')
  20.                                 </div>
  21.                                 <div class="tab-pane @if($active_tab == 'site_content') active @endif" id="pills-settings-site-content" role="tabpanel"
  22.                                      aria-labelledby="pills-settings-site-content-tab">
  23.                                         @include($current_admin_template.'.admin.settings.site-content')
  24.                                 </div>
  25.  

Если 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):
скопировать код в буфер обмена
  1.         $('#pills-tab a').on('click', function (e) {
  2.             setTimeout(function() {
  3.             $(".chosen_select_box").chosen({
  4.                 disable_search_threshold: 10,
  5.                 no_results_text: "Nothing found!",
  6.                 allow_single_deselect: true,
  7.             });
  8.         }, 1000);
  9.  
и проверил что этот метод вызываетсмя - но не помогло и chosen select input нулевой ширины
В инспекторе я не смог высмотреть почему так и как это побороть ?

2) На странице http://votes[dot]my-demo-apps[dot]tk/ внизу есть список новостей и непонятно что за полоса
в левой части списка : https://prnt[dot]sc/omgp1j ?

Спасибо!
 
 Top
andrewkard
Отправлено: 31 Июля, 2019 - 17:18:02
Post Id


Участник


Покинул форум
Сообщений всего: 1353
Дата рег-ции: Нояб. 2014  


Помог: 30 раз(а)




Как то так решалось
CODE (html):
скопировать код в буфер обмена
  1.  
  2. .chosen-container.chosen-container-single {
  3.     width: 100% !important;
  4. }
  5.  
 
 Top
mstdmstd
Отправлено: 01 Августа, 2019 - 13:30:55
Post Id


Частый гость


Покинул форум
Сообщений всего: 147
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Спасибо с п1!
Загляните плиз в пункт 2
 
 Top
andrewkard
Отправлено: 01 Августа, 2019 - 14:50:48
Post Id


Участник


Покинул форум
Сообщений всего: 1353
Дата рег-ции: Нояб. 2014  


Помог: 30 раз(а)




andrewkard пишет:
Загляните плиз в пункт 2

CODE (html):
скопировать код в буфер обмена
  1.  
  2. ul.news-line::before {
  3.     content: ' ';
  4.     background: #d4d9df;
  5.     display: inline-block;
  6.     position: absolute;
  7.     left: 29px;
  8.     width: 2px;
  9.     height: 100%;
  10.     z-index: 400;
  11. }
  12.  


background: #d4d9df;
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB