Forgot your password? Forgot your username? Create an account

 
Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Center Field with label and margins

Center Field with label and margins 1 year 10 months ago #12558

  • descobrir
  • descobrir's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
  • Karma: 0
Hello! No need to state that aiContactSafe rules, is it!!!? I'm really liking to work with this application.
For now I have 2 difficulties and I'm needing some help.

I need to center align label with field (I have some fields on vertical position),

and I need to find a way of changing the individual margins (top and bottom - increase and also decrease) between fields.

Link to site: w##ww.mci.pt/pt/teste-aicontact

How can I do that?

Thank You for helping.
The administrator has disabled public write access.

Center Field with label and margins 1 year 10 months ago #12559

  • Alex
  • Alex's Avatar
  • OFFLINE
  • Administrator
  • Posts: 7792
  • Thank you received: 246
  • Karma: 60
Hi,

Both your problems are resolved using CSS.
To align the labels and fields set each of them to the same size and set the text-align attribute to center.
All the labels and fields are placed in DIVs with specific IDs and classes. You can set any attribute any way you like.

To see the HTML tags and the CSS codes controlling them you can use Firebug ( getfirebug.com/ ).
The administrator has disabled public write access.

Center Field with label and margins 1 year 10 months ago #12560

  • descobrir
  • descobrir's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
  • Karma: 0
Please excuse me but my css level is no level at all... :(

To display the fields one after the other I introduced (as seen on the forum) the code
div#aiContactSafe_mainbody_3 #aiContactSafe_row_aics_patrimonio { display:block; float:left; clear:none !important; width:80px; overflow:hidden; }
- I did that for the fields I needed and it worked.

You are now asking me to make lines of code to individually control each label and field that I need. I tried to understand how to do it but I failed.
Can you please give a line of code controlling label and field that I can use and then change to suite? I know this must be basic, but I'm not getting there.

I Thank you
The administrator has disabled public write access.

Center Field with label and margins 1 year 10 months ago #12561

  • Alex
  • Alex's Avatar
  • OFFLINE
  • Administrator
  • Posts: 7792
  • Thank you received: 246
  • Karma: 60
Depends where you have the label and where you have the field.
To manage the label for the field "aics_name" if the label is on the left side of the field you need to use something like this:
div#aiContactSafe_row_aics_name div.aiContactSafe_contact_form_field_label_left { display:block; margin:10px; padding:10px; }
And this is for the input tag:
div#aiContactSafe_row_aics_name div.aiContactSafe_contact_form_field_right { display:block; margin:10px; padding:10px; }
You need to replace "aics_name" with the name of the field you want to control.
If the input is in front of the label ( this is a parameter of the field ) you need to use "left" instead of "right" and "right" instead of "left".

You can see the tags of a HTML page and the CSS controlling it using Firebug ( getfirebug.com/ ).
You can learn more about CSS here: w3schools.com/css/
The administrator has disabled public write access.

Center Field with label and margins 1 year 10 months ago #12562

  • descobrir
  • descobrir's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
  • Karma: 0
That Worked!

Thanks!
The administrator has disabled public write access.

Center Field with label and margins 1 year 10 months ago #12563

  • Alex
  • Alex's Avatar
  • OFFLINE
  • Administrator
  • Posts: 7792
  • Thank you received: 246
  • Karma: 60
Happy to hear that. :)
The administrator has disabled public write access.
  • Page:
  • 1