Formulardarstellung

[jensg]

Hallo Gemeinschaft,

ich verwende diesen Code für das Formular

leider werden die weiteren Filterkriterien links untereinander dargestellt - anders bekomme ich es nicht hin, könnt ihr mir helfen, dass die Kriterien in 5 Spalten nebeneinander dargestellt werden

Quelltext hier			<form [form_id] class="[form_class]" method="POST" data-search-only="[search_only_data]" action="[form_action]">
				[form_title]
				<div class="hb-searched-summary hb-clearfix">
					<p class="hb-check-dates-wrapper hb-chosen-check-in-date">[string_chosen_check_in] <span></span></p>
					<p class="hb-check-dates-wrapper hb-chosen-check-out-date">[string_chosen_check_out] <span></span></p>
					<p class="hb-people-wrapper hb-chosen-adults">[string_chosen_adults] <span></span></p>
					
					<p class="hb-people-wrapper hb-chosen-children">[string_chosen_children] <span></span></p>
					[chosen_admin_accommodation_type]
					<p class="hb-change-search-wrapper hb-search-button-wrapper">
						<input type="submit" value="[string_change_search_button]" />
					</p>
				</div><!-- .hb-searched-summary -->
				<div class="hb-search-fields-and-submit">
					<div class="hb-search-fields hb-clearfix">
						<p class="hb-check-dates-wrapper">
							[check_in_label]
							<input id="check-in-date" name="hb-check-in-date" class="hb-input-datepicker hb-check-in-date" type="text" placeholder="[check_in_placeholder]" autocomplete="off" />
							<input class="hb-check-in-hidden" name="hb-check-in-hidden" type="hidden" value="[check_in]" />
							<span class="hb-datepick-check-in-out-mobile-trigger hb-datepick-check-in-mobile-trigger"></span>
							<span class="hb-datepick-check-in-out-trigger hb-datepick-check-in-trigger"></span>

						</p>
						<p class="hb-check-dates-wrapper">
							[check_out_label]
							<input id="check-out-date" name="hb-check-out-date" class="hb-input-datepicker hb-check-out-date" type="text" placeholder="[check_out_placeholder]" autocomplete="off" />
							<input class="hb-check-out-hidden" name="hb-check-out-hidden" type="hidden" value="[check_out]" />
							<span class="hb-datepick-check-in-out-mobile-trigger hb-datepick-check-out-mobile-trigger"></span>
							<span class="hb-datepick-check-in-out-trigger hb-datepick-check-out-trigger"></span>

						</p>
						<p class="hb-people-wrapper hb-people-wrapper-adults">
							[adults_label]
							[people_selects_adults]
							<input class="hb-adults-hidden" type="hidden" value="[adults]" />
						</p>
<p class="hb-people-wrapper hb-people-wrapper-adults">
							



							
						</p>
						<p class="hb-people-wrapper hb-people-wrapper-children hb-people-wrapper-last">
							[children_label]
							[people_selects_children]
							<input class="hb-children-hidden" type="hidden" value="[children]" />
						</p>
						[admin_accommodation_type]
						<p class="hb-search-submit-wrapper hb-search-button-wrapper">
							[search_label]
							<input type="submit" id="hb-search-form-submit" value="[string_search_button]" />
						</p>
						
					</div><!-- .hb-search-fields -->
					<p class="hb-search-error">&nbsp;</p>
					<p class="hb-search-no-result">&nbsp;</p>
					<p class="hb-booking-searching">[string_searching]</p>
							<div><h2><b>weitere Filter:</b></h2><span ><input type="checkbox" name="DOG" value="1">Haustiere (max.2)<br></span>
							<span><input type="checkbox" name="Internet" value="1">Internet<br></span>
							<span><input type="checkbox" name="eingezäunt" value="1">eingezäunt<br></span>
							<span><input type="checkbox" name="schlafzimmer" value="1">3Schlafzimmer<br></span>
							<span><input type="checkbox" name="badezimmer" value="1">2Badezimmer(Dusche/WC)</span></div>
							<div><input type="checkbox" name="wintergarten" value="1">Wintergarten<br>
							<input type="checkbox" name="wc" value="1">Gäste-WC<br>
							<input type="checkbox" name="rollschalf" value="1">Rollläden Schlafzimmer<br>
							<input type="checkbox" name="fliegenschlaf" value="1">Fliegengitter Schlafzimmer<br>
							<input type="checkbox" name="fliegenkomplett" value="1">Fliegengitter komplett</div>
							<div>
<input type="checkbox" name="carport" value="1">Carport<br>
<input type="checkbox" name="ebenerdigeDusche" value="1">ebenerdige Dusche<br>
<input type="checkbox" name="weitereFernseher" value="1">weitere Fernseher
</div>
				</div><!-- .hb-search-fields-and-submit -->
				<input type="hidden" class="hb-results-show-only-accom-id" name="hb-results-show-only-accom-id" />
				<input type="hidden" class="hb-chosen-options" name="hb-chosen-options" value=\'[options]\' />
				<input type="hidden" class="hb-chosen-accom-num" name="hb-chosen-accom-num" value=\'[accom_num]\' />
			</form><!-- end #hb-booking-search-form -->

[Felix Riesterer]

Lieber jensg,

bitte nicht falsch verstehen, aber ich möchte wissen, wieviel Du von HTML und CSS schon verstehst. Woher kommt Dein HTML-Code?

Liebe Grüße

Felix Riesterer

[jensg]

Hi Felix - kommt aus einem Plugin einer Wordpressanwendung, - habe es php seitig erweitert und wollte es nun ein wenig hübsch machen

[Felix Riesterer]

Lieber jensg,

kommt aus einem Plugin einer Wordpressanwendung,

daher weht also der Wind.

habe es php seitig erweitert

Für ausgefeiltere Formularoptionen, nehme ich an?

und wollte es nun ein wenig hübsch machen

Ja, und woran scheitert es? Du willst etwas in fünf Spalten anzeigen lassen. Auch auf dem Smartphone? Wenn man es hochkant stellt?

Dein Posting trägt die Tags php und programmiertechnik. Ich vermisse schmerzlich das Tag css. Offensichtlich hast Du Dich mit CSS noch nicht (genügend) auseinandergesetzt. Das solltest Du aber, da Dein Anliegen eine Sache von CSS ist. Dieses steuert dann die maximal sinnvolle Anzahl an Spalten in der Darstellung, basierend auf dem verfügbaren horizontalen Platz.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@jensg

leider werden die weiteren Filterkriterien links untereinander dargestellt

Wieso leider? So sind sie für den Nutzer gut zu erfassen.

könnt ihr mir helfen, dass die Kriterien in 5 Spalten nebeneinander dargestellt werden

Das würde das Formular verschlimmern; das wäre widersinnig.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!