xtcDynSpryForm Formularbreite

[chrkleemann]

Hallo Zusammen,

ich setze erstmalig das Modul "xtcDynSpryForm" ein und habe ein Problem, dessen Lösung ich offensichtlich nicht allein hinbekomme:

In meinem Formular habe ich neun Chrckboxen, hinter denen verschieden langer Text steht. Dieser wird leider umbrochen. Die volle Breite nimmt das Formular nicht an. Ich habe es in des CSS mehrfach probiert. Ich glaube jedoch, dass ich mit meinem fachlichen Wissen schlicht an meine Grenzen stoße Könnte mir hier jemand helfen? Ich nutze das mitgelieferte Beispiel CSS ...

Vielen Dank vorab sendet

Christian

[idea-tec]

Hilfreich ist immer ein Link, oder ein Screenshot, denn:
Es gibt 2 Möglichkeiten eine Kristallkugel zu benutzen:
a) um damit Spekulationen über ein Problem oder Wunsch eines Users zu machen
b) um sie einem besonders unkooperativen User über den Schädel zu ziehen.

ansonsten gehe ich davon aus, dass dieses hier in deiner css-datei steht:

Code: Alles auswählen

#SpryContactForm ul li span span.grpcheckbox {
display:block;
float:left;
height:25px;
width:100px;
}

#SpryContactForm ul li span span.grpradio {
display:block;
float:left;
height:25px;
width:70px;
}

wenn dem so ist, dann musst du eigentlich nur die werte von width ändern.

[chrkleemann]

Verzeihung! Den Link hatte ich vergessen. Die Seite steht noch nicht online, hier der Link zur Vorschau:
link

CSS habe ich schon angepasst. Irgendwie funktioniert es trotzdem nicht ...

Gute Grüße,
Christian

[idea-tec]

ich habe das ganze mal aufgebröselt, und dann sieht das am beispiel eines li so aus:

Code: Alles auswählen

<li class="grpcheckbox">
	<label for="Ich interessiere mich für">Ich interessiere mich für:</label>
	<span style="float:left;">
		<span class="grpcheckbox">
			<input type="checkbox" value="Technik" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Technik
		</span>
		<span class="grpcheckbox">
			<input type="checkbox" value="Espresso-Kaffee" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Espresso-Kaffee
		</span>
		<span class="grpcheckbox">
			<input type="checkbox" value="Gastronomie" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Gastronomie
		</span>
		<br class="clear" />
		<span class="grpcheckbox">
			<input type="checkbox" value="Zubereitung" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Zubereitung
		</span>
		<span class="grpcheckbox">
			<input type="checkbox" value="Maschinen & Zubehör" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Maschinen & Zubehör
		</span>
		<span class="grpcheckbox">
			<input type="checkbox" value="Laden / Büro" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Laden / Büro
		</span>
		<br class="clear" />
		<span class="grpcheckbox">
			<input type="checkbox" value="Präsente" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Präsente
		</span>
		<span class="grpcheckbox">
			<input type="checkbox" value="feine Kost" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />feine Kost
		</span>
		<span class="grpcheckbox">
			<input type="checkbox" value="Zuhause genießen" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Zuhause genießen
		</span>
	</span>
</li>

da haben wir mal ein li das in der breite gerade mal so breit wird, wie es benötigt, da keine breite angegeben ist
dann haben wir ein span, das meiner meinung nach unsinnig ist um alles weitere drumrum, das gefloatet wird, was für das Problem "Umbrüche" aber eigentlich egal ist
Nun kommen wir zum Punkt:
<span class="grpcheckbox"> => ist mit ALLEM Inhalt eigentlich gerade mal 100px breit, wie man unten sehen kann:
Da du kein <label> für den Text verwendest wird alles was ich hier noch einmal anzeige auf 100px beschränkt:
"<input type="checkbox" value="Maschinen & Zubehör" name="Ich interessiere mich für[]" id="Ich interessiere mich für" />Maschinen & Zubehör"
Das das umbricht ist vollkommen klar

Code: Alles auswählen

#SpryContactForm label{
    display:block;
    float:left;
    width:130px;
}
#SpryContactForm ul li.grpcheckbox{
	height:auto;
}
#SpryContactForm ul li span span.grpcheckbox{
	display:block;
	width:100px;
	height:25px;
	float:left;
}