Самозагрузка 4 выпадающего вниз не выравнивается вправо - PullRequest
Новая
       0

Самозагрузка 4 выпадающего вниз не выравнивается вправо

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

enter image description here У меня много сложностей с выравниванием

1) Каретка в раскрывающемся списке до конца раскрывающегося списка справа.

2 Я не могу выровнять элементы по левому краю, когда раскрывающийся список раскрыт.

Для объяснения проблемы добавлен маркер

Полный код приведен здесь. 

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"/>
<style>
.multiselect.dropdown-toggle.btn {
    text-align: left;
    font-size:10px;
    height:30px;
    border-radius:0px;
    background-color:white;
    outline: none;
    border-color:black
    }


   .dropdown-menu{
       font-size:9px
    }
    .btn .caret {
    position: absolute;
    right: 10px;
    top: 10px;
    }

</style>
</head>

<div style="display:inline-block">
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;margin-left:10px;font-size:10px" value="Select"/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:200px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:120px;font-size:10px" value="Select "/>  
<div>
<div style="display:inline-block">
<span style="margin-left:10px" />
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started1" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started2" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started3" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started4" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started5" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started6" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started7" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>



<div>
<script>
  $(document).ready(function (){
    $('#example-getting-started').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });

    $('#example-getting-started1').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });
    $('#example-getting-started2').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started3').multiselect({
       buttonWidth: '200px',
       includeSelectAllOption: true
    });
    $('#example-getting-started4').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started5').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started6').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });
    $('#example-getting-started7').multiselect({
       buttonWidth: '120px',
       includeSelectAllOption: true
    });
  }
  );
</script>

Как видите, я пытался применить стиль .caret с помощью float: правильный стиль, но он не работает.

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

Ответы [ 2 ]

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

Чтобы отредактировать позицию каретки, вам нужно исправить .dropdown-toggle::after css с @Cuong Hoang или следующим CSS, оба они будут работать. Просто не забудьте правильно указать желаемый .dropdown-toggle, если вы не хотите, чтобы другие каретки были переставлены. 

.btn.multiselect.dropdown-toggle::after {
    float: right;
    margin-right: 0;
    margin-top: 7px;
}

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

.multiselect-container > li > a > label {
  padding: 3px; 20px 3px 0;
}

Проверьте рабочую скрипку здесь

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

Вот, пожалуйста!

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

.dropdown-toggle {
    position: relative;
}

.dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 13px;
}

.multiselect-container  > li {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 5px !important;
}

.multiselect-container  > li > a > label {
    padding: 0px !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.multiselect-container  > li > a > label > input {
    margin: 0px !important;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"/>
<style>
.multiselect.dropdown-toggle.btn {
    text-align: left;
    font-size:10px;
    height:30px;
    border-radius:0px;
    background-color:white;
    outline: none;
    border-color:black
    }


   .dropdown-menu{
       font-size:9px
    }
    .btn .caret {
    position: absolute;
    right: 10px;
    top: 10px;
    }

</style>
</head>

<div style="display:inline-block">
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;margin-left:10px;font-size:10px" value="Select"/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:200px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:120px;font-size:10px" value="Select "/>  
<div>
<div style="display:inline-block">
<span style="margin-left:10px" />
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started1" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started2" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started3" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started4" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started5" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started6" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started7" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>



<div>
<script>
  $(document).ready(function (){
    $('#example-getting-started').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });

    $('#example-getting-started1').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });
    $('#example-getting-started2').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started3').multiselect({
       buttonWidth: '200px',
       includeSelectAllOption: true
    });
    $('#example-getting-started4').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started5').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started6').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });
    $('#example-getting-started7').multiselect({
       buttonWidth: '120px',
       includeSelectAllOption: true
    });
  }
  );
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...