Change the scroll direction in the horizontal layout

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Change the scroll direction in the horizontal layout

This topic contains 5 replies, has 2 voices, and was last updated by

 
Keymaster
5 years, 3 months ago.

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

    Participant

    Hello, i wonder if it’s possible to change the scrolling for the horizontal results layout (or to edit the vertical layout), id like scroll it down rather than on the side. The vertical layout is fine but i’d love to have more (and bigger) thumbnails per row, rather than one small per row, basically id like to have an horizontal layout with the vertical layout behavior 🙂 hope you can help, thanks

    #10249

    Hi!

    Well, after some experimenting I might have found a possible solution, where you won’t need to change anything in the plugin files.

    Simply use this custom CSS and the vertical layout:

    .asp_image {
        width: 100% !important;
        height: 200px !important;
    }

    It will force 100% width for the image with a 200px height (of course you can change that). This resulted in something like: https://i.imgur.com/b7MHvGd.png

    I hope it helps!

    Best,
    Ernest Marcinko

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


    #10282

    Participant

    Hello Ernest, thanks for your help, I tried but it just put the items one per row, id like something like the attached image here http://imgur.com/a/qmZnn , same as the horizontal view but with the scroll down rather than horizontal, basically having 4 items per row not 1. Hope you can help, thanks

    #10283

    Oh, I see now. Well, that’s a bit more difficult, but I would say possible. Although please note that this is a modification “hack”, so I cannot guarantee that these suggestions will work correctly at any circumstances.

    Same as before, use the vertical view, but with this custom CSS:

    
    .results .item {
        width: 24% !important;
        max-width: 24% !important;
        box-sizing: border-box !important;
        margin: 0.5% !important;
        flex: 0 0 25%;
        -webkit-flex: 0 0 25%;
        padding: 10px 4px !important;
    }
    
    .resdrg { 
        display: flex;
        flex-wrap: wrap;
    }
    
    .results .asp_spacer {
        display: none !important;
    }
    
    .results {
        max-height: 300px;
    }
    
    .asp_image {
        width: 100% !important;
        height: 200px !important;
    }
    

    This code resulted this layout: https://i.imgur.com/2mYcAqQ.png

    It’s probably not 100% correct, but it should be a good starting point.

    Best,
    Ernest Marcinko

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


    #10296

    Participant

    Amazing, thanks, i used your code as starting point and now it’s great, thanks a lot for your support

    #10297
    You cannot access this content. Best,
    Ernest Marcinko

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


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Change the scroll direction in the horizontal layout’ is closed to new replies.