Author Topic: Vertical field positioning  (Read 262 times)

Offline NickC4555

  • Jr. Member
  • **
  • Posts: 17
    • View Profile
Vertical field positioning
« on: 05/December/2011, 09:08:54 AM »
Down to the small stuff now!

The new client registration form looks great except for fields that require confirmation (i.e. email and password). On these, the confirmation field is a few pixels too low, so it creates a gap above it and it slips behind the field below.

Offline netshine

  • Administrator
  • Hero Member
  • *****
  • Posts: 4,952
    • View Profile
Re: Vertical field positioning
« Reply #1 on: 05/December/2011, 09:35:48 AM »
That is an effect of your template's styling rules. You will need to tweak your CSS files, or just spread out your fields a bit more on the order form. Alternatively, you could try using a table output instead which provides more consistent results across different templates and browsers but restricts the flexibility of field positioning (each page has a property which enables you to specify whether to output the fields in a table).

Offline NickC4555

  • Jr. Member
  • **
  • Posts: 17
    • View Profile
Re: Vertical field positioning
« Reply #2 on: 05/December/2011, 09:54:47 AM »
Unless I'm being dim, you can't change the relative position of a field and its corresponding confirmation field, they can't be selected individually in the editor. The problem is the same when the output is rendered as a table.
« Last Edit: 05/December/2011, 10:12:46 AM by NickC4555 »

Offline netshine

  • Administrator
  • Hero Member
  • *****
  • Posts: 4,952
    • View Profile
Re: Vertical field positioning
« Reply #3 on: 05/December/2011, 07:23:25 PM »
No, I meant spread out the other fields so that they have the same size gap between them as the fields with a confirmation. Still, you can style confirmation fields individually as they have id attributes. Eg. if the id of a confirmation field is 'ctl_password_confirm' you could add a CSS style like this:

#ctl_password_confirm
{
  top: 300px !important;
}

...but it is probably easier just to spread out your other fields to use the same size gap (no CSS required then).

Offline NickC4555

  • Jr. Member
  • **
  • Posts: 17
    • View Profile
Re: Vertical field positioning
« Reply #4 on: 06/December/2011, 08:10:10 AM »
This fixed it:

#confirm_63, #confirm_66
{
   position:absolute;
   top: -1px;
}

 

anything