Search Bar Appearing Vertically

[Heenaa Biswas]

Hi, when I apply the shortcode [mphb_availability_search] to my homepage, the search bar appears vertically. How do I change this to appear horizontally?
Thanks,
Heenaa

[J. Davis]

Hi Heenaa,

The styling of a form depends on your theme styling. Usually it is vertical to look properly on mobile devices. If you want to customize it and make its layout horizontal you should apply custom CSS code. We’ll review your request for adding some solution in future plugin updates.
Currently you can email us and we’ll take a look at your theme design to advice and assist you with it.

Best regards,
John

[Manfredo]

Hello John,

i need also a horizontally search bar, like in your theme: https://hbdemo.getmotopress.com/villagio/

I use this theme: generatepress

Do you have an idea?

Thanks in advance,

best Regards,

Manfredo

[J. Davis]

Hello Manfredo,

The styles of form depends on the theme design. In case you want to change something in theme layout you need to add custom styles to your theme. For example you can inspect form classes using browser Inspector tool and apply different CSS rules to position form horizontally.

We’ve also added your request to our features list to provide some solution in one of the next updates.

In case you need it urgently and need our assistance in customizing form layout you can order Extended Support offer and we’ll assist you with this.

best regards,
John

Best regards,
John

[Heenaa Biswas]

Hi, has there been any solution to this issue yet? I am using Generate Press theme and still having the same problem.
Also, I would like to customise the pages that get setup automatically with the plugin, like accommodation and search availability, how do I customise them to fit my theme? Also need to customise the way the calendar appears, is there a way to do all this without using a bunch of code?
I can provide login details if needed.
Many thanks.
Heenaa

[Heenaa Biswas]

Hi, just a quick follow-up to my last question, I’ve found the code from a different thread to use in the custom css, however is there a way to further stylise the search bar? Also when I click in the date field it requires me to type in the date as opposed to a calendar showing up. What’s happening?

Honestly, I’m quite disappointed overall by this plugin, everyone seems to claim this is a very good hotel booking plugin but your styling and layout options almost seem non-existent unless used with particular themes and leave a lot to be desired. Even using the hotel booking integration for elementor doesn’t help matters any.
Very sad.

[J. Davis]

Hello Heenaa,

Thank you for your comments and feedback. The design of hotel booking and its parts directly depend on your theme as it inherits your theme styles. Usually theme developers provides predefined styling for general input forms, buttons, etc and Hotel Booking plugin inherits it. However it looks like your theme does not have such styles and you need to add it with custom CSS. We have tested plugin with different free themes from wordpress . org and other premium templates and it looked nice.

Thus once you made your search form horizontal now your need to add more CSS attributes to adjust input, select, button elements.

As for calendar styles so there are available predefined style under Dashboard>Accommodation>Settings>(scroll down to find a calendar style selector)

We also provide personal style customization with Extended Support offer.

You can also take a look at our property rental templates built with Hotel Booking plugin and we’ll make an exception for you and let your pay the difference to get a theme with plugin. Then you will be able to use Hotel Booking plugin just with this theme.

Let me know if you have any further question.

best regards,
John

[Marcel Heiniger]

Hello to all complaining they are no horizontal search capacity
I’m glad happy that the developer of the plugin let the theme developer taking care about the visual and not enforcing some CSS.

Here a simple custom CSS that transform the search to horizontal on screen

@media only screen and (min-width: 600px){
	.mphb_sc_search-form{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 70px 10px;
		grid-template-areas: "checkin checkout guest kids searchbutton" "foother foother foother foother foother";
		grid-column-gap: 5px;
	}

	.mphb_sc_search-check-in-date { grid-area: checkin; }

	.mphb-datepick{

	}

	.mphb_sc_search-check-out-date{ grid-area: checkout; }

	.mphb_sc_search-adults { grid-area: guest; }

	.mphb_sc_search-children { grid-area: kids; }

	.mphb_sc_search-submit-button-wrapper { grid-area: searchbutton;
	margin-top: 25px;}

	.mphb-required-fields-tip { grid-area: foother; 
	}
}

[J. Davis]

Thank you Marcel for shared CSS and for your feedback.

[fernando albert]

Hi, i put this css code and says that have 1 error and marks in red this part of the code: “checkin checkout guest kids searchbutton” “foother foother foother foother foother”, can you help me please? Im begging for horizontal widget!

[Mary Evans]

Hello, you may click “Update anyway” it should not break the site.
Best regards,
Mary Evans
MotoPress Support

[Author]

Posts