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 Ernest Marcinko 7 years, 11 months ago.
- AuthorPosts
- September 23, 2016 at 12:05 pm #10234
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
September 26, 2016 at 11:48 am #10249Hi!
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 :)
September 29, 2016 at 1:28 pm #10282Hello 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
September 29, 2016 at 2:00 pm #10283Oh, 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 :)
September 29, 2016 at 4:22 pm #10296Amazing, thanks, i used your code as starting point and now it’s great, thanks a lot for your support
September 29, 2016 at 4:24 pm #10297You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
- AuthorPosts
The topic ‘Change the scroll direction in the horizontal layout’ is closed to new replies.