Forums

I have a form that i customly designed using tables. It was easy to create but doesnt look good on mobile devices so I'm trying to rebuild the form using div containers.
My installation has containers sized width 10%, 20%, 30% and so on (as you can see in the code "spalteXX%l" the l is for align left).
This is how it is supposed to look like
I tried using 2 containers side by side with all the lines (it works fine for just text boxes):

<div class="spalte45l">
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Schule:</label></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input maxlength="150" size="30" class="" title="" type="text" value="" name="schule" /></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Studium:</label></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input maxlength="150" size="30" class="" title="" type="text" value="" name="studium" /></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Höchster Abschluss*:</label></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="abschluss" /></p>	
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label> </label></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"> </p>	
</div>
				<div class="spalte45l">
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Englisch:</label></p>
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input type="hidden" name="englisch" value="" alt="ghost" />
						<div style="float:left; clear:none;"><input type="checkbox" name="englisch[]" id="englisch_0" title="" value="Sprechen" class="" />
						<label for="englisch_0">Sprechen</label>
						<input type="checkbox" name="englisch[]" id="englisch_1" title="" value="Schreiben" class="" />
						<label for="englisch_1">Schreiben</label>
						</div></p>
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Französisch:</label></p>
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input type="hidden" name="franzoesisch" value="" alt="ghost" />
					<div style="float:left; clear:none;"><input type="checkbox" name="franzoesisch[]" id="franzoesisch_0" title="" value="Sprechen" class="" />
					<label for="franzoesisch_0">Sprechen</label>
					<input type="checkbox" name="franzoesisch[]" id="franzoesisch_1" title="" value="Schreiben" class="" />
					<label for="franzoesisch_1">Schreiben</label>
						</div></p>
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Russisch:</label></p>
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input type="hidden" name="russisch" value="" alt="ghost" />
					<div style="float:left; clear:none;"><input type="checkbox" name="russisch[]" id="russisch_0" title="" value="Sprechen" class="" />
					<label for="russisch_0">Sprechen</label>
					<input type="checkbox" name="russisch[]" id="russisch_1" title="" value="Schreiben" class="" />
					<label for="russisch_1">Schreiben</label>
						</div></p>
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Sonstige:</label></p>
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input maxlength="150" size="30" class="" title="" type="text" value="" name="sprachen" /></p>
				</div>	

and I tried using a div container for each row:

<div class="spalte45l">
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Schule:</label></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input maxlength="150" size="30" class="" title="" type="text" value="" name="schule" /></p>
</div>
					<div class="spalte45l">
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Englisch:</label></p>
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input type="hidden" name="englisch" value="" alt="ghost" />
						<div style="float:left; clear:none;"><input type="checkbox" name="englisch[]" id="englisch_0" title="" value="Sprechen" class="" />
						<label for="englisch_0">Sprechen</label>
						<input type="checkbox" name="englisch[]" id="englisch_1" title="" value="Schreiben" class="" />
						<label for="englisch_1">Schreiben</label>
						</div></p>
					</div>				
<div class="spalte45l">
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Studium:</label></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input maxlength="150" size="30" class="" title="" type="text" value="" name="studium" /></p>
</div>
					<div class="spalte45l">
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Französisch:</label></p>
											<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input type="hidden" name="franzoesisch" value="" alt="ghost" />
					<div style="float:left; clear:none;"><input type="checkbox" name="franzoesisch[]" id="franzoesisch_0" title="" value="Sprechen" class="" />
					<label for="franzoesisch_0">Sprechen</label>
					<input type="checkbox" name="franzoesisch[]" id="franzoesisch_1" title="" value="Schreiben" class="" />
					<label for="franzoesisch_1">Schreiben</label>
					</div></p>
					</div>
<div class="spalte45l">
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Höchster Abschluss*:</label></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="abschluss" /></p>
</div>
					<div class="spalte45l">
					<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Russisch:</label></p>
											<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input type="hidden" name="russisch" value="" alt="ghost" />
					<div style="float:left; clear:none;"><input type="checkbox" name="russisch[]" id="russisch_0" title="" value="Sprechen" class="" />
					<label for="russisch_0">Sprechen</label>
					<input type="checkbox" name="russisch[]" id="russisch_1" title="" value="Schreiben" class="" />
					<label for="russisch_1">Schreiben</label>
					</div></p>
					</div>	
<div class="spalte45l">
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label> </label></p>
	<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"> </p>
</div>
					<div class="spalte45l">
						<p style="min-width:130px;padding:0px;margin:2px" class="spalte20l"><label>Sonstige:</label></p>
						<p style="min-width:130px;padding:0px;margin:2px" class="spalte70l"><input maxlength="150" size="30" class="" title="" type="text" value="" name="sprachen" /></p>
					</div>

What am I missing? I'm aware there is probably a nicer way less difficult but I really don't code alot..
I'm grateful for every tip!

Hi benjoko,

I'm not clear exactly what the problem is?

In general forms with multiple columns may look neat but are not easy to use. It might be simplest to switch to a plain single column layout and use container to break it up. That will work better in a responsive template.

If you are using Joomla! 3 you can use some of the Bootstrap classes to style form elements.

Bob

@Alysha50: please don't fullquote if not neccessary, it really makes the thread unclear... perhaps you could edit your post and delete the fullquote since it is redundand.

It might be simplest to switch to a plain single column layout and use container to break it up. That will work better in a responsive template.

I thought that exaclty is what I was trying to do..?! The form is too complex to put in a single row. The user is supposed to state his job history (from/till/at/as) for the last couple of years as well as all kinds of other data, single row wouldn't be very clear..
In my template.css of Joomla 3 I added a bunch of these

.spalte10l
{
width:10%;
border:0px #000 solid;
float:left;
position:relative;
margin:0;
padding: 2px 5px;
}
.spalte20l
{
width:20%;
border:0px #000 solid;
float:left;
position:relative;
margin:0;
padding: 2px 5px;
}

and so on...

These want to use to adress and place the textboxes etc. It worked well until I used the checkboxes and radio boxes..

So I can obviously build "tables" this way for textboxes(see smiley)!

But the radiobox and checkbox group won't give me a clean design.. 😢 The part called "Fremdsprachen" was supposed to go where the X is..

Hi benjoko,

It looks to me as though the block on the left is just too wide to let you add the div on the left - or maybe there's a CSS clear there. The alternative way to handle the checkboxes would be to copy and paste the HTML into a Custom Element element where you can edit it and change the classes and styling while still using the Preview box.

I repeat that two column forms like this are generally considered bad design, it's better to stick to a single column unless there are closely related inputs like day+month+year.

If possible would also break a long form up into separate pages to make it seem less formidable to the user.

Bob

PS Alysha50 was a spammer - now deleted for a while.

PPS Please use the Upload Attachment box in the editor to add images so I don't have to fight my way through the popups to see them.