Как сделать так, чтобы выпадающий список не менял ширину с другим текстом или не влиял на другие элементы? - PullRequest
Новая
       41

Как сделать так, чтобы выпадающий список не менял ширину с другим текстом или не влиял на другие элементы?

0 голосов
/ 16 января 2019

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

В настоящее время код выглядит так: 

<div class="entry">
    <span>1</span> <!--This is the label that I want to fix -->
     <div class="btn-group">
         <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Not Selected</button>
          <div class="dropdown-menu">
              <a class="dropdown-item">Not Selected</a>
              <a class="dropdown-item">short</a>
              <a class="dropdown-item">This is long text</a>
            </div>
       </div>
   </div>

Вот мой jsbin со всем кодом .

Цифровые метки (1-5) перемещаются при изменении размера кнопки, поэтому все выглядит неорганизованно и непривлекательно. Как я могу либо предотвратить его перемещение, либо установить фиксированную ширину раскрывающегося списка, который гарантированно уместится во весь текст?

Ответы [ 4 ]

0 голосов
/ 16 января 2019

друг, я изменяю класс css класса .btn, вот код, подобный этому 

.btn{
   min-width: 131px;
    max-width: 131px;
    overflow: hidden;
    text-overflow: ellipsis;
    
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
      .number{
        font-size: 3vw;
        vertical-align: middle;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div class="container text-center">
      
      <!-- template for one dropdown -->
      <template id="template">
        <div class="entry">
          <div class="btn-group">
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Not Selected</button>
          <div class="dropdown-menu">
              <a class="dropdown-item">Not Selected</a>
              <a class="dropdown-item">short</a>
              <a class="dropdown-item">This is very long text</a>
            </div>
          </div>
        </div>
      </template>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
      //generates 5 dropdowns concisely (instead of copying and pasting HTML code)
      var template = document.getElementById("template")
      for(var i = 1; i<=5; i++){
        //creates span with number
        var span = document.createElement("span");
        var num = document.createTextNode(i);
        span.setAttribute("class", "number");
        span.appendChild(num);
        
        //adds span to the template
        var clon = template.content.cloneNode(true);
        clon.childNodes[1].prepend(span); 
        document.getElementsByClassName("container")[0].appendChild(clon);
      }
 
      $(document).ready(function(){
        //replaces text in the dropdown with current selection
        $(".dropdown-item").on("click", function(){
          $(this).parent().prev().text($(this).text());
        });
              });
    </script>
  </body>
</html>

https://codepen.io/Qleoz12/pen/NempvQ?editors=1100

помните, что в некоторых случаях длинный текст может переполняться

0 голосов
/ 16 января 2019

Вы можете редактировать CSS для ul.dropdown-menu

Размеры для установки фиксированной ширины: 

max-width
min-width

Фиксированная ширина для 

<span>1</span> <!--This is the label that I want to fix -->

Изменить на 

<span style='width=100px'>1</span> <!--This is the label that I want to fix -->

Измените 100px на любую нужную ширину

Для кнопки: 

 <div class="btn-group">

Изменить CSS в таблице стилей или изменить эту строку на: 

 <div class="btn-group" style='width=100px'>

Надеюсь, это поможет

0 голосов
/ 16 января 2019

Вы можете добавить следующее свойство CSS для решения этой проблемы: 

.btn-group button{
    width:130px !important;
}
0 голосов
/ 16 января 2019

Добавьте ширину к вашему классу кнопок следующим образом, это не даст ему измениться в зависимости от выбранного значения. 

.btn-success {
    width:250px;
    max-width:100%;
}

https://jsfiddle.net/0yur1s42/

...