Блог

Главная - Вопросы по программированию - Выбор ширины ввода не максимизируется, когда он вызывается или используется внутри модального

Выбор ширины ввода не максимизируется, когда он вызывается или используется внутри модального

#bootstrap-4 #bootstrap-modal #jquery-select2

#bootstrap-4 #bootstrap-модальный #jquery-select2

Вопрос:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/rjda.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newblotter"><i class="fa fa-plus-square-o fa-lg"></i>New Blotter Record</button>

    <div class="modal fade" id="newblotter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
                <!--Start Select-->
                <div class="col-md-6">
                    <div class="tile">
                      <div class="tile-title-w-btn">
                        <h3 class="title">Select2</h3>
                        <p><a class="btn btn-primary icon-btn" href="https://select2.github.io/examples.html" target="_blank"><i class="fa fa-file"></i>Docs</a></p>
                      </div>
                      <div class="tile-body">
                        <p>This plugin can be used to convert select element into advanced componant.</p>
                        <h4>Demo</h4>
                        <select class="form-control" id="demoSelect" multiple="">
                          <optgroup label="Select Cities">
                            <option>Ahmedabad</option>
                            <option>Surat</option>
                            <option>Vadodara</option>
                            <option>Rajkot</option>
                            <option>Bhavnagar</option>
                            <option>Jamnagar</option>
                            <option>Gandhinagar</option>
                            <option>Nadiad</option>
                            <option>Morvi</option>
                            <option>Surendranagar</option>
                          </optgroup>
                        </select>
                      </div>
                    </div>
                  </div>
                  <!--End Select-->
            </div>
         </div>
        </div>
    </div>


    <!-- Essential javascripts for application to work-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    <!-- The javascript plugin to display page loading on top-->
    <script src="js/plugins/pace.min.js"></script>
    <!-- Page specific javascripts-->
    <script type="text/javascript" src="js/plugins/select2.min.js"></script>
    <script type="text/javascript">
      $('#demoSelect').select2({
        dropdownParent: $('#newblotter')
    });
    </script>
</body>
</html>

Вот пример вывода данного синтаксиса при размещении внутри модального.
Sreenshot

Возможно, есть способ максимизировать ширину до 100%? Я уже пробовал делать ~

 <select class="form-control" id="demoSelect" multiple="" width="100%">

и это не работает.

Всякий раз, когда я помещал код «Select» в основной текст, он полностью работает. Даже ширина выбора максимизируется на 100%, но всякий раз, когда я помещаю ее внутри модального. Ширина стала примерно 10%, как вы можете видеть на скриншоте.

Я использую Bootstrap 4.

Комментарии:

1. Может быть, вы можете сделать это через состояния css с состоянием:focus ?

2. @AlePlo Можете ли вы уточнить это подробнее?

3. Выполнение точного кода, который у вас есть в <body>...</body> , дает мне ожидаемый результат, как показано здесь . Убедитесь, что дополнительные CSS-файлы, которые у вас есть ( main.css и rjda.css ), не конфликтуют ни с одним классом из библиотеки начальной загрузки.