TOPIC: Registration Form Formatting

Link: http://els.2elearning.com/index.php/reg ... alRegister

I just finished adding all my registration questions to my DT Register event and the registration page seems very messy. There does not seem to be any time of standard formatting. Some of the check box answers will be under the question where as some are to the right of the question. I realize this is happening because the answers are so long that they must drop under the question in order to make enough room for all the content.

Editing the CSS, how can I force the answers to all appear under the questions while allowing the question to expand the full length of the screen? (Not that the questions seem to be in a small left justified table and are not expanding the length of the scree).

I also see there are padding issues as well, but I found a form that provided that answer for me.

Thank you for your help

Here's the problem... your content area is pretty thin. I've never seen checkboxes get pushed under the label like that before... but it's due to the length of your checkbox values and not having enough room so they get pushed over.

Things you could do:
- set a smaller width for the label column by modifying the width setting for ".dtlabel" in /components/com_dtregister/assets/css/main.css

- for field values that are still wider than the available spacing, try adding a <br /> tag inside of the field value to force a line break in the longer values.

Suggestion:

Your template CSS file csseed95.css has a long string of items where it is removing padding and margin from pretty much everything. The form would look better with some padding left inbetween the fields. Your template is what is pulling all of that out.

Thank you for your response. Would it be possible to move the field values underneath the label column for everything except the text fields? Several of our questions are really long and it will look a lot more legible if the labels were above the field values.

Also I was able toe restore the formatting for the form. It looked like the module RokTab was blocking several of the tags. The module strips all tags unless specified not to. I thought I included all major tags, but I suppose I missed some. I am not sure which tags were stripped when it was up.

I am still going to attempt to use the tricks in the following forms to help clean up and organize the form:

http://www.dthdevelopment.com/index.php ... elds#p3155

http://www.dthdevelopment.com/index.php ... elds#p3561

Thank you again for your help.

I was able to drop some of the form fields under the labels based on label length as well as increase padding by using the css below. Now hopefully I can increase the label length with spaces so that all the check boxes and radio buttons are underneath the labels.

dt.dtlabel {
position: relative;
font-size: 12px;
min-width: 16em;
max-width: 50em;
padding: 10px 0;
}

dd.dtfield {
position: relative;
min-width: 50px;
max-width: 500px;
padding: 10px 0;
}

Discovered thats not the best way of doing it. If a checkbox or radiobutton label is short, there is not way to get the field values to drop underneath the label. Any advice?

It is not intended for field values to display UNDER the label. You need to force wrapping of the long field values using the <br /> as suggested earlier.