Page 1 of 1

Move the labels on DV template to above input field - V5.22

Posted: 2014-02-01 00:54
by shasta59
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)

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>
Here is the new code:

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 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

Re: Move the labels on DV template to above input field - V5

Posted: 2014-02-01 02:50
by shasta59
Here is a picture with the labels above the fields. This is a cheap and dirty example so I could post a picture.



Alan

Re: Move the labels on DV template to above input field - V5

Posted: 2014-02-04 05:39
by KSan
This is a very very useful tutorial. Thank you very much for sharing your amazing knowledge.

Re: Move the labels on DV template to above input field - V5

Posted: 2014-08-16 14:30
by mgain2013
Alan,

I like the way this looks, however if the field is a Combo box it doesn't give you the drop down box. What would you change in the code to accommodate a combo box?

Thanks,
Michael

Re: Move the labels on DV template to above input field - V5.22

Posted: 2015-03-23 02:21
by tmathew
Great to share such knowledge. It will be good to mention the filename to change also, when posting such code changes since most of the viewers will be new to appgini/php/html . . .
As mentioned above, can you please post the changes for HORIZONTAL display of fields as well
Thanks

Re: Move the labels on DV template to above input field - V5.22

Posted: 2015-04-04 04:46
by shasta59
The filename is sort of mentioned. It is the DV template. DV stands for detail view. Look in the templates folder for any file ending in "Your_tablename_templateDV.html".

Alan