Results 1 to 10 of 10
  1. #1
    Join Date
    Aug 2014
    Location
    Colorado Springs, CO
    Posts
    7
    Plugin Contributions
    0

    Default Field alignment on the Billing Information screen... need directions on how to fix

    Running V1.5.1 and using the Classic Green default template

    When checking out (AS A GUEST) the fields on the Billing Info screen are not aligned. Click image for larger version. 

Name:	Billing Info Screen.jpg 
Views:	154 
Size:	43.4 KB 
ID:	14974

    I have changed the WIDTH: in the CSS from 750px to 1024px to 100% but that did not correct field alignment.

    Yet... on all my PC's the alignment is an issue but on my Smart TV it looks/aligns perfect.

    Asking for guidance on what and where to adjust/change/modify the code so fields are aligned on the Billing Information screen. That seems to be the ONLY screen with an alignment issue. In fact, if you hit "Change Address" on Billing screen 2 of 3, the address info blank screen is in perfect alignment.

    Wondering if it has anything to do with the BILLING ADDRESS "box" being inside of the GUEST CHECKOUT "box" ???

    Thanks... Richard

    http://rental.coloradospringseventcenter.com/

  2. #2
    Join Date
    Dec 2014
    Location
    SE TX
    Posts
    32
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    looks like you can either

    add .fec-field {clear:both;}

    or get rid of float:left; in label.inputLabel on line 119

    in stylesheet.css

    1st option seems best, 2nd option causes width of label to collapse
    Last edited by SignTorch; 12 Feb 2015 at 11:56 PM.

  3. #3
    Join Date
    Aug 2014
    Location
    Colorado Springs, CO
    Posts
    7
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    Thanks SignTorch... for both the very prompt reply and your solutions.

    I went with getting rid of the float:left; because I was not sure where to place your suggested .fec-field {clear:both;} Your correct that the label width collapsed a bit.

    That simple deletion really cleaned up my input screen making my site more user friendly. I have a lot of little changes still to make but it's a learning process.

    Thanks again, Richard

  4. #4
    Join Date
    Dec 2014
    Location
    SE TX
    Posts
    32
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    you're welcome,

    try adding these lines to the css file

    Code:
    .fec-field {clear:both;}
    .fec-field label.inputLabel {width:120px;}
    that will make all the text inputs line up vertically on the left side, which looks better

    not at my PC to test it, but I think that will do it...

  5. #5
    Join Date
    Aug 2014
    Location
    Colorado Springs, CO
    Posts
    7
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    Again... thanks for your time.
    I am a true newbe at CSS, fortunately I do know to make multiple backups of any file that I start playing with.
    I inserted the code you suggested in multiple places in the appropriate CSS file but there was not any change in vertical alignment.
    In the current CSS file your suggestion is located at line 191-193. Do I need to place it somewhere else or format it differently?

    Thanks again, Richard


    Quote Originally Posted by SignTorch View Post
    you're welcome,

    try adding these lines to the css file

    Code:
    .fec-field {clear:both;}
    .fec-field label.inputLabel {width:120px;}
    that will make all the text inputs line up vertically on the left side, which looks better

    not at my PC to test it, but I think that will do it...

  6. #6
    Join Date
    Dec 2014
    Location
    SE TX
    Posts
    32
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    you did it right, it doesn't matter where it is in the file, except later rules take precedence, so sometimes order can have an effect

    the problem is the label is not a block element, so width is being ignored, and if we add display:inline-block; to .fec-field label.inputLabel then it will use the width of 120px

    Code:
    .fec-field label.inputLabel {width:120px;display:inline-block;}
    then add this line to right justify the red astericks

    Code:
    .fec-field .alert {float:right;}

  7. #7
    Join Date
    Aug 2014
    Location
    Colorado Springs, CO
    Posts
    7
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    Amazing.... looks GREAT. Thank you again SignTorch

    Are you available for hire and interested in doing small modifications (mostly template wise) projects for me rom time to time. If so PM me.

    Richard

    Quote Originally Posted by SignTorch View Post
    you did it right, it doesn't matter where it is in the file, except later rules take precedence, so sometimes order can have an effect

    the problem is the label is not a block element, so width is being ignored, and if we add display:inline-block; to .fec-field label.inputLabel then it will use the width of 120px

    Code:
    .fec-field label.inputLabel {width:120px;display:inline-block;}
    then add this line to right justify the red astericks

    Code:
    .fec-field .alert {float:right;}

  8. #8
    Join Date
    Dec 2014
    Location
    SE TX
    Posts
    32
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    no, I'm not a developer, for those sorts of changes I just use the browser web developer tools to look at the CSS, and that lets you make temporary changes to see how each setting affects appearance, without messing anything up, then it shows you the CSS file name and line number to edit if you decide to keep the changes, it's really so simple and so powerful, it's worth taking a couple of hours to read up on how CSS selectors work and how to use a browser developer tool just enough to play around with CSS, then it's all downhill from there, and it's kind of fun to, once you get the hang of it you can find all kinds of ways to tweak or radically change the appearance of your web site with a few lines of CSS code.

  9. #9
    Join Date
    Aug 2014
    Location
    Colorado Springs, CO
    Posts
    7
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    I have played with that through FireFox, mostly clicking off lines of code or changing numbers to see effects it has on the display.... very easy and slick, now I just need to take time and read up on working with and how CSS works.

    I need to add the "Company" name field to the "Billing Information" AKA: first check out screen. I am sure it can be easily done since I see that after filling in the "Billing Information" screen in step 1 and you click on "Change Address" on screen/step "2 of 3 Billing Information" that the "Company" name field is displayed ..... I need the "Company" name field to be on the first/initial screen too.

  10. #10
    Join Date
    Dec 2014
    Location
    SE TX
    Posts
    32
    Plugin Contributions
    0

    Default Re: Field alignment on the Billing Information screen... need directions on how to fi

    in default template

    when you click Change-Address it loads either tpl_checkout_shipping_address_default.php or tpl_checkout_payment_address_default.php, depending on which page you're on

    both of those call the same form template tpl_modules_checkout_new_address.php, to enter the address

    which displays the Company-Name field if Configure/Customer Detais/Company is true

    so both shipping and billing address forms are identical

    apparently you are using Fast-Easy-Checkout and apparently that uses a different template altogether for the billing address, but it appears to use the normal template for the shipping address, which explains why the two address forms are not the same

    FEC may have it's own address settings somewhere, or it may just not provide for a Company-Name field, I don't use FEC so no clue if that's it or what to do

    here's what the default billing change address looks like


    Click image for larger version. 

Name:	billing.jpg 
Views:	59 
Size:	23.8 KB 
ID:	14988

 

 

Similar Threads

  1. Alignment issues on only 1 of my 100+ product pages. How to Fix?
    By sfklaas in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 18 Jan 2010, 04:16 PM
  2. adding a field to the order screen
    By ewalker3 in forum General Questions
    Replies: 1
    Last Post: 4 Nov 2009, 09:34 PM
  3. How do I skip Billing Information?
    By thins in forum Built-in Shipping and Payment Modules
    Replies: 1
    Last Post: 20 Jul 2009, 03:09 AM
  4. Create account page - how to fix a field?
    By Kruna in forum General Questions
    Replies: 0
    Last Post: 23 Jun 2007, 02:23 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR