Контроль ширины раскрывающегося списка «multi-select» после создания с использованием JavaScript - PullRequest
Новая
       28

Контроль ширины раскрывающегося списка «multi-select» после создания с использованием JavaScript

0 голосов
/ 21 июня 2019

У меня есть модал на веб-странице, в котором есть выпадающий список. Если конечный пользователь изменяет размер окна, выпадающий список оказывается шире модального (и выглядит уродливо).

Моя цель состоит в том, чтобы раскрывающийся список всегда помещался внутри модала. 

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=11" >

<link rel="stylesheet" type="text/css" href="theme.css">

<style>

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding: 8px 8px;
  box-shadow: 0 3px #999;  
}


/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 70%;
}

.button {
  display: inline-block;
  padding: 8px 8px;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;    
  box-shadow: 0 3px #999; 
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/x/multiple-select.js" type="text/javascript"></script>

<button class="button" onclick="javascript:myFunction()">Add Entry</button> 

<div id="myModal3" class="modal">
        <div class="modal-content">
                <button class="btn btn-default" onclick="javascript:document.getElementById('myModal3').style.display = 'none';">X</button>
        <p id="demo1"></p><br>
              <select multiple="multiple" id="select0"></select><br>
                <button class="button" onclick="javascript:myFunction()">update size</button>
   </div>
</div> 

<script>
// on inital run, set up the drop down box.
    var $select = $('#select0');
    $select.multipleSelect({
     multiple: true,
      width: 600,
      multipleWidth: 1000
    });

// add a test value.
    value = 'Testing...1...2...3';
    var $opt = $('<option />', {
        value: value,
        text: value,
    selected: true,
    disabled: false
      });

   $select.append($opt);                      // add this item to our drop down
   alert("Set 600 wide");

function myFunction() {

  document.getElementById('myModal3').style.display = "block";  // make sure the modal can be seen.

  var width = $("#myModal3").width();
  document.getElementById("demo1").innerHTML = 'modal width is ' + width;

// add an item to modal window for testing..
  var $select = $('#select0');
  value = 'Entry1_' + width;
  var $opt = $('<option />', {
        value: value,
        text: value,
    selected: false,
    disabled: false
      });
   $select.append($opt); // add this item to our drop down

    // if screen is narrow, set drop down to narrow size.
    if (width < 800) { 
      var $opt = $('<option />', {
         multiple: true,
       })
    $opt.prop('width', 400);  // set width of element??
    $opt.prop('multipleWidth', 400);  // set width of element??
    $('#select0').multipleSelect($opt);
    alert("Set to be 400");
    };  // end if narrow.

   $('#select0').multipleSelect(); // force a refresh

}

</script>

</body>
</html>

Когда я определяю размер раскрывающегося списка, любое переопределение в будущем, похоже, игнорируется. Если размер страницы изменится, размер выпадающего списка останется прежним и даже выйдет за пределы окна реальной страницы.

Могу ли я установить настройку CSS или конкретный способ уменьшить размер как часть события?

...