Move the labels on DV template to above input field - V5.22
Posted: 2014-02-01 00:54
I prefer my labels to be in the same div as the input field. Find this gives me better control over the look. In this example the label will appear above the input field. It is easy to make it appear below also. I like to have, rather than a vertical layout, a horizontal layout for some forms. For example, having "First Name", "Last Name" on the same line. This is the first step to making that happen. I will post another tip on how to make the form go horizontal rather than vertical. (Unless there is one already for that and I missed it). Again it is really easy to do.
Here is how to do it. It is easy!
Here is the old code: (a sample)
Here is the new code:
If you look at both instances above you will see the differences. First I removed the class for the label. Then I took the code for the label and placed it right after the div tag for the input field and before the input field code.
If you wish the label to be beneath the input field just place the code for the label just before the last </div> tag and you will now have the label underneath. I find this method gives me more flexibility on my fields. It also allows me to use less space for when I make a horizontal form.
Enjoy
Alan
Here is how to do it. It is easy!
Here is the old code: (a sample)
Code: Select all
<div class="form-group">
<label for="address" class="control-label col-lg-1">Address<span class="text-danger">
<%%TRANSLATION(*)%%>
</span></label>
<div class="col-lg-4">
<input tabindex="1" maxlength="50" type="text" class="form-control" name="address" id="address" value="<%%VALUE(address)%%>" required />
</div>
Code: Select all
<div class="col-lg-4">
<label for="address" >Address<span class="text-danger">
<%%TRANSLATION(*)%%>
</span></label>
<input tabindex="1" maxlength="50" type="text" class="form-control" name="address" id="address" value="<%%VALUE(address)%%>" required />
</div>
If you wish the label to be beneath the input field just place the code for the label just before the last </div> tag and you will now have the label underneath. I find this method gives me more flexibility on my fields. It also allows me to use less space for when I make a horizontal form.
Enjoy
Alan