Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › is there any way to hide the results' scrollbar for desktop view, but make it vi
- This topic has 9 replies, 2 voices, and was last updated 3 years, 4 months ago by
Ernest Marcinko.
-
AuthorPosts
-
January 24, 2023 at 2:55 pm #41075
kyrian
ParticipantHi,
is there any way to hide the results’ scrollbar for desktop view, but make it visible for mobile view?I tried inserting int he “results box maximum height” for Desktop a huge value like 100000px
but the scrollbar still showsThanks
January 24, 2023 at 3:28 pm #41079Ernest Marcinko
KeymasterHi,
Try also increasing the viewport size to 9999 here: https://i.imgur.com/6Uptnqi.png
That will do the trick.January 24, 2023 at 4:07 pm #41080kyrian
ParticipantThanks you,
yes it works but what I am trying to accomplish is having different settings for desktop vs mobileI want no maximum height for desktop and 80vh for tablet and mobile
I tried like this https://tinyurl.com/2gn9f9dy
but it doesn’t set the scrollbar for mobile unfortunately
January 24, 2023 at 4:17 pm #41081Ernest Marcinko
KeymasterThat will do exactly that. The viewport size is the actual “height” and the max-height limits the maximum value.
Something like this will do exactly that: https://i.imgur.com/U9mkHju.png
I just tested and this setup gives a desktop view without scrollbar and mobile view with a scrollbar. Make sure to clear your cache after making the change.
January 24, 2023 at 4:23 pm #41082kyrian
ParticipantThanks, I guess it’s a just a cache issue then!
Since I am here…
I want to run the below code on the search results to truncate the characters depending on the user screen size.
I have inserted the code via Oxygen above the results shortcode and it works so and so… it does truncate the texts but with a certain delay.
See https://accademiainfinita.it/2/meditazioni-guidate/Do you think the only way to make this work is to put the code directly in the plugin file?
I know I am asking questions that are beyond the scope of support btw, just say the word and I’ll shut up 🙂
window.addEventListener("resize", truncateCharacters); const query1 = window.matchMedia("(min-width: 480px) and (max-width: 991px)"); const query2 = window.matchMedia("(max-width: 479px)"); function truncateCharacters() { if (query1.matches) { const titles = document.querySelectorAll('.asp_res_url , .asp_res_text'); for(let title of titles){ if (title.innerText.length > 100) { title.innerText = title.innerText.slice(0,100) + "..."; } } } else if (query2.matches) { const titles = document.querySelectorAll('.asp_res_url , .asp_res_text'); for(let title of titles){ if (title.innerText.length > 50) { title.innerText = title.innerText.slice(0,50) + "..."; } } } } truncateCharacters(); query1.addListener(truncateCharacters); query2.addListener(truncateCharacters);January 24, 2023 at 5:13 pm #41083Ernest Marcinko
KeymasterHmm, interesting issue. I think you should try the line-clamp css property instead of javascript. It is used to truncate the number of lines instead of characters, but may actually work.
You can place them in media queries based on the screen size.January 25, 2023 at 11:11 am #41086kyrian
ParticipantThank you!
I didin0t know this propertyI had to wrap the title with a span to make it work, but the result is perfect.
<span>{titlefield}</span>
#full-page-search-results .asp_content h3 a span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }January 25, 2023 at 11:13 am #41087Ernest Marcinko
KeymasterYou cannot access this content.
January 25, 2023 at 11:36 am #41088kyrian
ParticipantI have already left a stellar review on codecanyon, will post it on wp too
January 25, 2023 at 12:32 pm #41089Ernest Marcinko
KeymasterYou cannot access this content.
-
AuthorPosts
- The topic ‘is there any way to hide the results' scrollbar for desktop view, but make it vi’ is closed to new replies.