Skip Navigation

[Resolved] Start and End Date in Custom Search Filters

This support ticket is created 3 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 19 replies, has 2 voices.

Last updated by Christian Cox 3 years, 7 months ago.

Assisted by: Christian Cox.

Author
Posts
#1725099
1724967-Sk_rmbillede_2020_08_02_kl._13.45.52.png

I am creating a search view function and I need a calendar where customers can pick the start date and end date. But when I add the calendar it looks very weird in the frontend. See screenshot. Can you help?

Also, do you by any chance have a video guide on how to style the search form? Right now it is not looking very good and I want more search boxes on the same line, and to add headings to the search boxes where I can pick the font type etc.

I would also like to move the search results farther down the page.

Thanks.

#1725785

Hello, where can I see the search View on the front-end of your site? I would like to take a closer look at the calendar you mentioned.

#1726013

hi Christian,

Please look here: hidden link

And also if you still have the admin login you can visit this page for the setup: hidden link

#1726127
Screen Shot 2020-08-03 at 3.52.20 PM.png

Okay I see now, the datepicker filter's calendar icon is being stretched out to fill the screen. Here is the offending CSS code:

.content>*.alignfull img {
    display: block;
    width: 100vw;
}

The width attribute is responsible for stretching the calendar icon to fill the screen. I would try adjusting this CSS selector somehow, or adding some code to override this specifically for the datepicker icon. The datepicker icon image has a CSS class of "ui-datepicker-trigger" if that helps. I'm not exactly sure where this CSS code was added, maybe in Appearance > Customize > Additional CSS, or in additional CSS for some block template, but it is currently enqueued as a minified file from the cache directory. See the screenshot here for more information (line 220 is responsible). Does this code look familiar, maybe something that was added manually?

#1727631

Hm... The code you took a screenshot of doesn't mean anything to me.. I did not add it and I am the only one working on the setup of the site.

I will try out your CSS code. Should I just put it into the pages CSS?

But is it not possible to insert a normal date picker from Toolset that filters the camp dates?

Thanks

#1727635

Okay, now I can't figure out how to add the CSS to the specific page... sorry Christian but can you help me?

#1727873

Hi again Christian,

Can you also help me creating a new ticket with this question (sorry but the link to opening a new ticket is not working for me)

Custom Styling of custom search not working

1) I created a custom search view and I want to style it, but it doesn't work. As an example I want my search fields to be in a grid of 3-4 columns but when I press update and look at the site nothing changes. Can you help?

2) 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: hidden link

Can you help? Thanks.

#1727877

And also I found out how to add the CSS to the search view - but it is not working. Sorry for all the messages.

#1728567

The CSS I provided isn't a solution, it's the source of the problem. Let me log in and try to find out where this style is coming from, and see if I can override it with some other code. I'll give you an update shortly.

I also created two other tickets for you and added them to the support queue. The next available supporter will pick those tickets up in turn.

#1728635

Well I'm not familiar enough with The7 to understand where this code is coming from. It's in a custom CSS file at this URL:
hidden link
I'm not sure how to change the code for that file, so I added an override for these datepicker triggers in the View's Custom CSS panel:

.content>*.alignfull img.ui-datepicker-trigger {
    width: inherit;
}

That fixes the problem for these datepicker triggers. Please check now.

#1728699

Hi Christian,

The date picker looks good BUT when I PICK a date, something happens. Try and take a look at the page and pick a date.

#1728745

Yes it's basically the same problem. Your theme is resizing the "delete" icon, stretching it out full width. I can add some code to override the stretched width.

#1729961

Thank you so much Christian! Let me know

#1729999

Sorry I don't understand your last comment, "let me know". Is there something else I can help with?

#1733589

Hi Christian,

So sorry for the late reply.
I just wrote "let me know" to your comment about adding some code to solve the problem 🙂 I understood the comment as you would do it and I just wrote "let me know" if there was any news 🙂

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.