Custom Styling of custom search not working
I want to show the result on a different place but on the same page but I can't seem to move the results. If I do they show up in only 1 column and I want 3 columns - just as I designed it in the first place. But when I chose to show the search results on a different location on the same page it only shows up in 1 full width column and I can't change it.
Page link: versteckter Link
Can you help? Thanks.
Hi,
Thank you for contacting us and I'd be happy to assist.
This issue with the grid container styles seems to be the same one that was identified in your other ticket.
( ref: https://toolset.com/forums/topic/search-box-2/#post-1682681 )
For now, you can show the search results on a different location on the same page and then include the following custom CSS code in the view, to force the search fields to show in a 4 column grid:
.wpv-filter-form > .tb-grid {
grid-template-columns: minmax(0, 0.3333fr) minmax(0, 0.3333fr) minmax(0, 0.3333fr);
grid-auto-flow: row;
}
regards,
Waqar
Hi Waqar,
so I tried to create a view that only shows the search results and as expected only 1 column shows up. Then I want to add your code, but where can I do that? I don't see the option. Sorry.
Hi,
You can add that CSS code in the view's "Custom CSS" field.
( screenshot: versteckter Link )
This should do the trick.
regards,
Waqar
Hi Waqar,
I just tried putting in the code but unfortunately it doesn't work 🙁
Can you help?
Sorry for the late reply.
And when I add another view called "se alle badmintoncamps" which should just display all available badminton camps i now get the same result. Only 1 column.
I created a new view for the "show all badmintoncamps" to make it work. So now we are back to just the first one not working
Hi Waqar - i also just remembered that i wanted to ask you this. If i want to add a map to the Views search results with the locations on, is that possible? I added a screenshot from airbnb as an example - my boss likes this setup a lot.
Hi,
I've checked the old page ( versteckter Link ) and the grid columns seem to be showing correctly.
Can you please share a link to a page where this issue can be seen?
As for the map's question, I've created a separate ticket for it and will reply to that shortly too.
( https://toolset.com/forums/topic/split-how-to-show-search-result-locations-on-map/ )
regards,
Waqar
Hi Waqar,
I just added the view results again and the CSS code is still there too - and as you can see only 1 column shows up in the results
versteckter Link
Hi,
The code that I sent earlier only targeted the grid blocks used inside the view's search form.
To extend it to also apply to the grid blocks used for the view's search results, you can update it to:
.wpv-filter-form > .tb-grid,
.js-wpv-loop-wrapper > .tb-grid {
grid-template-columns: minmax(0, 0.3333fr) minmax(0, 0.3333fr) minmax(0, 0.3333fr);
grid-auto-flow: row;
}
regards,
Waqar
I Waqar - it seems to work now, thanks!
I'll move on and try the guide for creating the results page and map.
My issue is resolved now. Thank you!