Forums › Forums › Search & Filter Pro › Is it possible to make columns in combobox ( select2)

Viewing 9 posts - 1 through 9 (of 9 total)
  • Anonymous
    (Private)  July 2, 2020 at 1:08 pm #251135

    I see when I inspect the code of the combobox that all the select items have li in front of them.
    Does this mean that is possible to create columns with css.
    If yes what do I have to add as css.
    Regards
    Wim Bax

    Trevor
    (Private)  July 2, 2020 at 1:14 pm #251138

    Select2 certainly has setting options to allow this, but it might be possible simply with Custom CSS using either columns or floats and widths.

    Are you able to send me a live link/URL to your search page so I can take a look?

    Anonymous
    (Private)  July 2, 2020 at 10:43 pm #251248

    I forgot to check notify by e-mail, so I missed your answer.
    I made one combobox on the page https://beeldarchief.hcan.nl/foto
    Regards
    Wim Bax

    Trevor
    (Private)  July 3, 2020 at 12:43 pm #251311

    You may need CSS like this:

    .select2-dropdown {
    width: 550px !important;
}
.select2-dropdown .select2-results__option {
    width: 48%;
    float: left;
}
    Anonymous
    (Private)  July 4, 2020 at 12:36 pm #251388

    I did a quick check, but the code did not work.At this moment I am going a week on holiday.
    Please keep this ticket open.
    I expect to answer again after July 11.
    Regards
    Wim Bax

    Trevor
    (Private)  July 6, 2020 at 5:06 pm #251589

    OK, I will wait to hear from you.

    Anonymous
    (Private)  July 16, 2020 at 6:49 pm #253108

    Hello , I am back
    As I wrote the code you provided gave no response at all.
    I am looking for a layout like
    item 1 item 4 item 7 item 10
    item 2 item 5 item 8 item 11
    item 3 item 6 item 9 item 12

    I tried to find which code had any effect on the combo box.

    I added in the css of the elementor seach & Filter Form the following css

    selector .searchfilter .select2-container–classic .select2-results>.select2-results__options, .select2-container–default .select2-results>.select2-results__options {
    max-height: 300px;
    overflow-y: auto;

    }
    This code increased the height of the combobox.
    But now the question is how to make this into a multi-column and of course a box with the appropiate width.
    Regards
    Wim Bax

    Trevor
    (Private)  July 17, 2020 at 10:46 am #253157

    I can see there is some of your styling still there. This is a simpler idea:

    .select2-results__options {
  columns: 4;
}
.select2-dropdown {
  width: 850px !important;
}
    Anonymous
    (Private)  July 20, 2020 at 5:00 pm #253329

    Thanks ,
    I tried your code and first it didn’t work, because I am used to add selector in front of the code that I add to elementor css.
    Without selector it was working.
    I will study further what I want and like.
    You can close this ticket
    Regards
    Wim Bax

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)