PnP-Tools
PnP-Tools copied to clipboard
pnp
Search Web Parts are not responsive
Hi,
I have a page in SharePoint Online site contains the common five search web parts ("Search Box", "Search Navigation", "Search Results", "Refinement" and "Taxonomy Refinement Panel"), but as you can see in the attached screenshot that they are not subjected to the Responsive UI.
Hi @MCTAhmad , thx you for your feedback... It's really useful and appreciated. I tried this case too, and in fact, you right, the search components are not supported by the current Responsive UI Solution in small resolution.
As @VesaJuvonen says so well : "Unfortunately responsive package does not support all different scenarios in the classic sites for 100%, which is why you see this. This scenario simply has not taken into account in the implementation currently. PnP is community driven initiative and we depend on community contributions in these kind of areas where additional capabilities are needed. We'll absolutely have a look on this scenario also if there's larger refactoring of the responsive package in future."
Thanks to your feedback, other developpers may be able to provide a solution.
@Ahmad-Gad and @Laul0 I have started dabbling into this issue from the CSS side on in the Enterprise Search Center. Right now I am focusing on the out of the box Search (default.aspx), Results (results.aspx) and People Results (peopleresults.aspx). I could use some advice on the JavaScript/jQuery side of the puzzle like the best way to override the default Hover Card (JavaScript) behavior because on the phone it is useless. (Maybe on the tablet it could work...) Some other issues:
- Can I collapse the Verticals? aka Search Navigation (not the refiners)
- What to do with the Refiners
- Can I globally override the hover cards
- Hide the hamburger on the default page?
Here is what I have so far.
Let me know how I can best help on this. Right now I am adding my changes to the CSS file.
Hi @MatthewMcD,
Thank you very much for your support. This looks just great. Regarding the refiners, I believe we can just add collapse button to display it when the page is shrunk. Regarding the hover cards, it should be displayed one by one when the user hover on them. I believe the location of the hover panel underneath the "ms-srch-item-path" would be fine as you did already. Regarding search navigation, the collapse vertically sounds great too. Regarding the hamburger menu, not sure what do with it to be honest. May be we can hide it then, or use it as collapse/expand for the refiners.
When do you think you can share the outcome with us :)?
Thanks, it still needs a lot of testing and I need to address Tablet mode.
The issue on hover is how to trigger them on touch devices, I don't know if there is a "hover" with touch. I suspect there is not, so I would need someone else to figure that out. The PowerPoint sample above is the OOB display template preview, not the hovercard.
I don't know how the navigation collapse code works. but we have two separate navigations to account for in the ui. I'll look at hiding the nav element on the default search page.
Hi,
We had tested the hover in iPad and it's working with just one touch over the document item. Not sure if it works in mobile. But I can test it on Android and I will update you.
I would be glad to help you in testing as well.
A quick question, are you using your own CSS, or working on the "SPResponsiveUI" one? @Laul0, your feedback is much appreciated as well.
If a tap opens the hover, what opens the search result item? Do you have to click the URL?
I have added the CSS to the main SP-Responsive-UI.css file.
@Ahmad-Gad (I am NOT a GITHub pro by any stretch of the imagination, so if there is a better way LMK.) I have created a branch for this issue https://github.com/MatthewMcD/PnP-Tools/tree/Issue134/Solutions/SharePoint.UI.Responsive currently it contains only the smart phone form factor mentioned above. I'll try to get the basic Tablet work done today and tomorrow.
I'll have a look at the JavaScript changes as well, but don't hold your breath.
Hi @MatthewMcD, Thank you for sharing the link. I'm afraid it doesn't work on my side, and they had just broken the whole responsive UI on the site. I got to install the original one back to fix the issue. Did you test it on SPO or On-premise?
No. If I didn't find a solution, I may go through creating an SPFx web part which does CSS and JavaScript injections to enable the responsive UI on the search default pages on Search Center Sites.
What site template are you using? So far I am only testing on the Enterprise Search Center (SRCHCEN#0) and the Team Site (STS#0).
Basic Search Center is not a publishing site. I suspect part of the issues you are seeing may be that some features and folders are different on that site.