This topic contains 5 replies, has 2 voices, and was last updated by Sean Sean 1 day, 2 hours ago.

Doubt with input-group


  • bruno_131085
    Participant

    Posts: 3
    Member Reply #12606

    Hi,

    How do I create a input-group with Select2 and Right/Left Button Dropdown?

    Best regards


    bruno_131085
    Participant

    Posts: 3
    Member Reply #12662

    My doubt is how to set the right top/bottom radius=0 when I have an input-group with select2/buttom dropdown.

     

    Regards


    bruno_131085
    Participant

    Posts: 3
    Member Reply #12663

    Already found the solution. It’s a bug that was fixed in a newer version of Select2.

    I added the following into vendors.bundle.css:

     

    /**

    * Select2 widgets in Bootstrap Input Groups

    *

    * @see http://getbootstrap.com/components/#input-groups

    * @see https://github.com/twbs/bootstrap/blob/master/less/input-groups.less

    */

    /**

    * Reset rounded corners

    */

    .input-group > .select2-hidden-accessible:first-child + .select2-container > .selection > .select2-selection,

    .input-group > .select2-hidden-accessible:first-child + .select2-container > .selection > .select2-selection.form-control {

    border-bottom-right-radius: 0;

    border-top-right-radius: 0;

    }

     

    .input-group > .select2-hidden-accessible:not(:first-child) + .select2-container:not(:last-child) > .selection > .select2-selection,

    .input-group > .select2-hidden-accessible:not(:first-child) + .select2-container:not(:last-child) > .selection > .select2-selection.form-control {

    border-radius: 0;

    }

     

    .input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container:last-child > .selection > .select2-selection,

    .input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container:last-child > .selection > .select2-selection.form-control {

    border-bottom-left-radius: 0;

    border-top-left-radius: 0;

    }

     

    .input-group > .select2-container {

    /*display: table;

    table-layout: fixed;*/

    position: relative;

    z-index: 2;

    width: 100%;

    margin-bottom: 0;

    /**

    * Adjust z-index like Bootstrap does to show the focus-box-shadow

    * above appended buttons in .input-group and .form-group.

    */

    /**

    * Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address

    * Multi Select2’s height which – depending on how many elements have been selected –

    * may grow taller than its initial size.

    *

    * @see http://getbootstrap.com/components/#input-groups

    */

    }

     

    .input-group > .select2-container > .selection > .select2-selection.form-control {

    float: none;

    }

     

    .input-group > .select2-container.select2-container–open, .input-group > .select2-container.select2-container–focus {

    z-index: 3;

    }

     

    .input-group > .select2-container,

    .input-group > .select2-container .input-group-btn,

    .input-group > .select2-container .input-group-btn .btn {

    vertical-align: top;

    }

    Sean
    Sean
    Keymaster

    Posts: 4022
    Support Staff Reply #12679

    Hi,

    Thanks for your feedback and providing this workaround. We will check it further and add select2 + input groups examples in the following updates. Also we will update the Select2 version as well.

    Thanks.


    bruno_131085
    Participant

    Posts: 3
    Member Reply #12685

    Thanks!

    Sean
    Sean
    Keymaster

    Posts: 4022
    Support Staff Reply #12780

    You are welcome! 🙂

You must be logged in to reply to this topic.