- lshad24Asked on January 09, 2014 at 11:53 AM
My form (33426781191961?) contains several sections. Each section has a header and associated items beneath this header. Under the first section header 'Conference Details', the associated items are indented correctly below the header. Can you tell me why the elements under each of the other headers (travel, lodging, etc.) are not indenting correctly when displayed in the browser?
- JotForm SupportTitusNAnswered on January 09, 2014 at 02:35 PM
Thank you for contacting us.
Please insert the following CSS into your form to get everything aligned correctly:
Please let us know if this helps.
- lshad24Answered on January 10, 2014 at 12:48 PM
Hi Titus, Thanks for answering. I don't want all of the form elements to be aligned to the left which is what the code you provided will do. I want the fields below each heading to be indented so that the form is easier to read. When I create my form and preview, the fields below the Conference Details indent properly, but the fields beneath the other headings do not. How can I fix this?
- JotForm SupportTitusNAnswered on January 10, 2014 at 02:27 PM
The Header fields are styled using div's, which thematically applies styles across the form.
This is what is making them overlap other fields, making those fields appear as if they are not indented:
To correct this, you need to replace all the headers (except the main one at the top) with Text/HTML fields and style them as headers as shown:
Here is some sample text with thematic tags:
<div id="subHeader_7" class="form-subHeader">Please enter your Travel estimates below. The current standard mileage rate is $0.565/mile</div>
After that, apply some styling to the headers you just replaced by injecting CSS rules to your form.
Please identify your header id's using this guide, replacing them with the right ones before styling your form with the following rule:
Here's a sample of the outcome: http://jotformpro.com/form/40076550209954?
Please let us know if you hit a bump.
- lshad24Answered on January 14, 2014 at 11:55 AM
TitusN, once again your help in resolving my display issue was timely and spot on, so thank you for taking the time to resolve it for me. On this same form, you provided help in getting a 'group' of fields (travel section) to display based on the conditiont that the 'row' above it was completed. One of the issues that I have with the solution is that I do not want a new row to display unless it is needed by the user. Can you modify your solution to include an 'add' button that users can click if they need to add another row? Is there a way to include an add button that doesn't clutter up the current design? Thanks fo rlooking at this again.
- JotForm SupportTitusNAnswered on January 14, 2014 at 12:08 PM
You are welcome.
Certainly, we can add an 'Add Row' button rather than the fields being filled as a conditional rule.
Please allow a little time, and I will add a response to your requested workaround on this thread: http://www.jotform.com/answers/313830-Conditions-based-on-a-button-click#11