Date Box too Wide + Possible to have combination of views?

[weezypops]

Hi, I hope it’s okay to ask both of these questions in the same place!

1. My search by date box is going off the page on the left hand side. I haven’t changed anything in the template so am not sure why this is. I’ve attached a screenshot to show how it looks! How can I fix this?

2. Is it possible to have a combination of views on the front page? Ideally I would like to have the calendar view as the default but then with events listed underneath. Is this something I can do?

3. Likewise, is it possible to change the default view depending on whether people are looking at the front page or the search results?

[Cliff]

Hi.

In our forums we keep our threads focused on just one issue at a time to ensure we fully answer each of your questions/issues. Please keep this in mind for the future and start a new thread for your additional questions from this thread. Thanks for your understanding, and I’ll answer only your first question.

This is likely a theme conflict, probably some CSS rule stating it should be 100% width.

If you provide a link where this is happening, I may be able to assist further.

[weezypops]

Sure, it’s http://www.essexmums.com/thingstodo/events/ when you click on the date box.

Thanks

[Cliff]

Thanks. I visited your site and saw a console error:

https://cl.ly/1M2Q3m1b0j2G -> “Uncaught ReferenceError: qm_create is not defined”

(If needed, you may reference our KB article Using Google Chrome Developer Tools.)

This could be affecting the datepicker’s width. Please fix your site so that it does not have any console errors anymore.

Please let me know how this goes for you.

[weezypops]

Okay, thanks. I have absolutely no idea what to do about this. I’ll try to work it out and get back to you.

[Cliff]

Googling around, it seems it might be related to something called Quick Menu. Maybe you used to have a plugin that integrated this script; maybe your theme does; maybe it’s some custom code that you should remove if it’s no longer in use… there’s no way for me to know for sure… but I think it’s in current use by the blue navigation bar on your site.

Digging a little deeper, that isn’t affecting your datepicker width, though.

Your theme (http://www.essexmums.com/thingstodo/wp-content/themes/poseidon/style.css?ver=1.1.8) makes <table> 100% width, which is the issue.

Adding this custom CSS to your site should solve the issue:

.datepicker.dropdown-menu {
max-width: 500px; /* or whatever */
}

You can add custom CSS code via your child theme’s style.css file, via WordPress 4.7’s Customizer CSS settings, or via a third-party plugin (not guaranteed or supported by us), like:

• SiteOrigin CSS (helps you visually build CSS selectors via its Inspector and Visual Editor, if that’ll help you)
• Simple Custom CSS
• Jetpack (supports regular CSS and the LESS and Sass pre-processors)

If you’re not a CSS expert, Jetpack’s Custom Design reference may prove helpful.

Please let me know how it goes for you.

[weezypops]

This did the trick, thank you!

[Cliff]

Glad to hear! Have a great weekend.

[Author]

Posts