Home / Questions / 443122
Accepted
emgodi
Asked: 2022-04-10 15:19:10 +0800 CST 2022-04-10 15:19:10 +0800 CST

Problem applying padding to a select element

  • 772

I have a form with several input fields formatted in this way with boostrap classes that work correctly.

<input class="form-control py-4" placeholder="Introduzca nombre completo del usuario" required name="name" type="text" id="name">

But if I try to apply these classes to a "select" tag it doesn't work right. Anything I select from the select is not displayed in the field. On the other hand, if py-4 is eliminated, the selected option is displayed correctly, although logically the field has a lower height than what was achieved with py-4.

<select class="form-control py-4" name="role_id" required>
        <option value="" disabled selected>--Seleccionar rol--</option>                                                                                             
        <option value="1">Administrador</option>                                                                                              
        <option value="2">Autor</option>
        <option value="3">Suscriptor</option>
</select>

Why isn't the py-4 class working fine in the select ?

bootstrap-4

1 Answers

  1. Best Answer

    ISSUE

    The problem is that the classes you intend to use are mutually exclusive, i.e. the class form-controlapplies its own height value on the element:

    .form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px); /* AQUÍ se establece un valor para la altura del elemento*/
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    paddingIf you also apply a not compatible ( ) rule to that element, py-4the result is that the text in the container is not displayed correctly.

    .pb-4, .py-4 {
    padding-bottom: 1.5rem!important;
}
.pt-4, .py-4 {
    padding-top: 1.5rem!important;
}

    SOLUTION

    One possible solution is to apply your own rule for this particular case (if that's really what you intend to do with your element's container select).

    For example, you could add a class called custom-auto-heightwhere you set the element's height to auto, with the declaration !important, so that it takes precedence over Bootstrap classes applied to the same element:

    .custom-auto-height {
  height: auto !important;
}

    and add it to your element selectas the last class in the class chain (Cascading Styles):

    .custom-auto-height {
  height: auto !important;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<select class="form-control py-4 custom-auto-height" name="role_id" required>
  <option value="" disabled selected>--Seleccionar rol--</option>                                                   <option value="1">Administrador</option>                   <option value="2">Autor</option>
  <option value="3">Suscriptor</option>
</select>

    I hope this helps you solve the problem.

    • 4