2 Columns

Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › 2 Columns

This topic contains 5 replies, has 2 voices, and was last updated by Elijah Lovkoff Elijah Lovkoff 8 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 16, 2015 at 6:13 am #6285
    Elijah Lovkoff
    Elijah Lovkoff
    Participant

    Hi Ernest, please take a look at second block here http://skylarkdev.wpengine.com/collection-3/ the one that says SEARCH BY GENRE.

    When you click on the down arrow you would see the portfolio categories configured for search.
    Is there any way to display them in two columns instead of the one long one?

    Thanks.
    Elijah.

    October 16, 2015 at 9:23 am #6287
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    I think I might have a solution without touching the code. Normally it would require adding some HTML elements, but I’ve tried the following CSS on the demo and it worked for me.

    
.asp_option_cat {
    width: 200px;
    display: inline-block;
}

.categoryfilter {
    width: 420px;
}

    That will make each option 200px wide displayed as inline-block and the container 420 pixels. That means it’s printed to 2 columns like so: https://i.imgur.com/UP0PMHA.png

    Best,
    Ernest Marcinko
    If you like my products, don't forget to rate them on codecanyon :)


    October 16, 2015 at 3:13 pm #6294
    Elijah Lovkoff
    Elijah Lovkoff
    Participant

    Thanks Ernest but there are a couple of things missing here:

    1. When broswer re-sized the display of Still Lifes and Landscape is cut off (attached C1.jpg)
    2. Blocks are not aligned (C2.jpg) – wich is probably related to #3, but this is also weird:
    3. There i a block that I had to remove in css:
    #ajaxsearchprobsettings11_1 legend {
    display: none;
    }
    …If I don’t remove it then the page will show the empty field as in Legend.jpg

    Page url: http://skylarkdev.wpengine.com/collection-3/

    If has a quick fix – great, if it doesn’t, then I’ll tell my client to use one column (My only worry here is tat if there will be 20 categories and I will use ‘push content down, then it would look pretty bad. So probably in the future it might not be a bad idea to have column layout anyway)

    Thanks.
    Elijah

    Attachments:
    You must be logged in to view attached files.
    October 16, 2015 at 4:15 pm #6312
    Elijah Lovkoff
    Elijah Lovkoff
    Participant

    I reverted some css back to previous one (hope it doesn’t bug you)

    October 16, 2015 at 4:26 pm #6313
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    How about increasing the width values and perhaps adding media queries for different browsers?

    First, try setting the fieldset width to 100%:

    .searchsettings fieldset {
    width: 100% !important;
}

    then the options to a min-width of 200px and a width of 45%:

    .asp_option_cat {
    min-width: 200px;
    display: inline-block;
    width: 45%;
}

    Try different values as well, but this way the width is going to be 45% on bigger screens, and minimum of 200 if it goes down. And if the screen is too small it automatically breaks the line to 1 column.

    The space on C2.jpg is because of the line alignment. Since the first element label is broken to two lines because of the 200px width, it icreases the line height, and the second one is printed to the line bottom by default. You can try increasing the line height or the vertical alignment, but as I can see there are more animated elements on the page, including the scrolling, and different vertical alignments may cause blurring in the text (browser bug). There is a good chance you will have to live with it, I don’t see other solution in inline-block mode.

    Best,
    Ernest Marcinko
    If you like my products, don't forget to rate them on codecanyon :)


    October 16, 2015 at 7:25 pm #6325
    Elijah Lovkoff
    Elijah Lovkoff
    Participant

    I think I’ve found a workable workaround.
    Thanks a lot!

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

You must be logged in to reply to this topic.