Form custom layout

Are you using any css library or framework or just using standart html and css? If using a framework, I would look at their documentation, usually they have a column layout or grid system that would work well here. If not using a framework, then I would start with setting the table width to 100% and then setting the td styles to the corresponding percent. Depending on the number of columns you have, it may be 33%, 20% etc. This should get you close to the desired results, unless I am reading this wrong.

I am using the custom form layout, html. This is standard html. I tried using width in px and %. These settings seem to be ignored when trying to decrease the width. For example, if I have an integer field with a name of TestNumberFive, the input field is $$input:TestNumberFive$$. If I want to decrease the field to a smaller width than the width of the text $$input:TestNumberFive$$ it ignores the setting. Even though the actual data is only integer and would have a much shorter width than the field name. Clear as mud? The only thing I can think of is to go back in and change my field names so they are shorter. That is kind of ridiculous though. I figure I must be missing something.

Put the percentages on the layout, not in those fields. Go to the layout and click source for the custom layout. Inside of the td put your style="width:20%"

That should work. Using the fields to do that, can be tricky. Sometimes it will put the style in, but not to where you thought it would.

I am putting the code under the Source button. Here is an example of the code:

Code
<table border="0" cellspacing="0" style="width: 1000px;">
<tbody>
    <tr>
        <td style="width: 20%;">&nbsp;</td>
        <td style="width: 20%;">&nbsp;</td>
        <td style="width: 20%;">&nbsp;</td>
        <td style="width: 20%;">&nbsp;</td>
        <td style="width: 10%;">&nbsp;</td>
        <td style="width: 10%;">&nbsp;</td>
    </tr>
    <tr>
        <td style="width: 20%;"><u>Date</u></td>
        <td style="width: 20%;"><u>Organization</u></td>
        <td style="width: 20%;"><u>Please check one:</u></td>
        <td style="width: 20%;"><u>Activity Description</u></td>
        <td style="width: 10%;"><u>Hours</u></td>
        <td style="width: 10%;"><u>Attendees</u></td>
    </tr>
    <tr>
        <td style="width: 20%;">$$input:CRADate$$</td>
        <td style="width: 20%;">$$input:CRAOrganization$$</td>
        <td style="width: 20%;">$$input:CRA$$</td>
        <td style="width: 20%;">$$input:ActivityDesc$$</td>
        <td style="width: 10%;">$$input:ServiceHours$$</td>
        <td style="width: 10%;">$$input:AttendeeCount$$</td>
    </tr>
</tbody>

But the width of the last field is not 10%. It is using the $$input:AttendeeCount$$ to set the width of the field. The field type is integer and it will probably be only 1 digit. Does this make sense?

Did you clear out the values in the field definition for css and styles? What does the rendered code show?

Good point! I viewed the source and here are the last to rows in the table. There is embedded css code.

Code</td>
        <td style="width: 10%;"><div id="p_lt_ctl04_pageplaceholder_p_lt_ctl00_CRAOn_lineForm_viewBiz_ncpservicehours" class="EditingFormControlNestedControl editing-form-control-nested-control">
        <input name="p$lt$ctl04$pageplaceholder$p$lt$ctl00$CRAOn_lineForm$viewBiz$ServiceHours$textbox" type="text" id="p_lt_ctl04_pageplaceholder_p_lt_ctl00_CRAOn_lineForm_viewBiz_ServiceHours_textbox" class="form-control" />

    </div></td>
        <td style="width: 10%;"><div id="p_lt_ctl04_pageplaceholder_p_lt_ctl00_CRAOn_lineForm_viewBiz_ncpattendeecount" class="EditingFormControlNestedControl editing-form-control-nested-control">
        <input name="p$lt$ctl04$pageplaceholder$p$lt$ctl00$CRAOn_lineForm$viewBiz$AttendeeCount$textbox" type="text" maxlength="11" id="p_lt_ctl04_pageplaceholder_p_lt_ctl00_CRAOn_lineForm_viewBiz_AttendeeCount_textbox" class="form-control" />

    </div></td>