This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

is there any way to hide the results' scrollbar for desktop view, but make it vi

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #41075
    kyriankyrian
    Participant

    Hi,
    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 shows

    Thanks

    #41079
    Ernest MarcinkoErnest Marcinko
    Keymaster

    Hi,

    Try also increasing the viewport size to 9999 here: https://i.imgur.com/6Uptnqi.png
    That will do the trick.

    #41080
    kyriankyrian
    Participant

    Thanks you,
    yes it works but what I am trying to accomplish is having different settings for desktop vs mobile

    I 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

    #41081
    Ernest MarcinkoErnest Marcinko
    Keymaster

    That 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.

    #41082
    kyriankyrian
    Participant

    Thanks, 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);
    #41083
    Ernest MarcinkoErnest Marcinko
    Keymaster

    Hmm, 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.

    #41086
    kyriankyrian
    Participant

    Thank you!
    I didin0t know this property

    I 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;
      }
    #41087
    Ernest MarcinkoErnest Marcinko
    Keymaster

    You cannot access this content.

    #41088
    kyriankyrian
    Participant

    I have already left a stellar review on codecanyon, will post it on wp too

    #41089
    Ernest MarcinkoErnest Marcinko
    Keymaster

    You cannot access this content.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘is there any way to hide the results' scrollbar for desktop view, but make it vi’ is closed to new replies.