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

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

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

Post by shasta59 » 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)

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
Calgary, Alberta, Canada - Using Appgini 5.50 -

User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

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

Post by shasta59 » 2014-02-01 02:50

Here is a picture with the labels above the fields. This is a cheap and dirty example so I could post a picture.



Alan
Attachments
labels above.jpg
PIcture of labels above fields
labels above.jpg (38.04 KiB) Viewed 7166 times
Calgary, Alberta, Canada - Using Appgini 5.50 -

KSan
AppGini Super Hero
AppGini Super Hero
Posts: 252
Joined: 2013-01-08 20:17

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

Post by KSan » 2014-02-04 05:39

This is a very very useful tutorial. Thank you very much for sharing your amazing knowledge.

mgain2013
Posts: 29
Joined: 2013-02-16 16:12

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

Post by mgain2013 » 2014-08-16 14:30

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

tmathew
Posts: 7
Joined: 2015-03-19 02:14

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

Post by tmathew » 2015-03-23 02:21

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

User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

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

Post by shasta59 » 2015-04-04 04:46

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
Calgary, Alberta, Canada - Using Appgini 5.50 -

Post Reply