Styling checkout form questions

ShopGenteiShopGentei Member
in Bugs & Feature Requests edited February 2008
I know this is simple, but I have to ask. What is the easiest way to create a column effect with the forms for the checkout templates? I'm attempting to line the input boxes up in a nice straight column, and having a world of a time because they are all named individually, etc. I would like them to look as pretty as the input forms in the foxycart admin panel and could use a lil help. Thanks!
Comments
  • Perhaps I should be just a little more specific. I'm fine with the labels, sitting left aligned in my containing divs, but the input fields sit directly next to them and are all over the place, which looks really sloppy. They are the same on the preview pages from the foxycart admin section. I would like all of the input fields to be right aligned and the same width.
  • brettbrett FoxyCart Team
    Without getting into it really heavy, I'd recommend checking this page out:
    http://wiki.foxycart.com/docs:templates:checkout

    Start out with the "text" theme CSS and go from there. Also, Firebug is the best thing ever.

    Let us know if that helps.
  • I've been doing a little research and it seems that the error is within Mozilla.

    It looks like I'll need to add the following:
    if( document.addEventListener ) »
    document.addEventListener( 'DOMContentLoaded', hideform, false);
    
    function hideform(){
      // Hide forms
      $( 'form' ).hide().end();
    
      // Processing
      $( 'form' ).find( 'li/label' ).not( '.nocmx' ) »
    .each( function( i ){
        var labelContent = this.innerHTML;
        var labelWidth = document.defaultView. »
    getComputedStyle( this, '' ).getPropertyValue( 'width' );
        var labelSpan = document.createElement( 'span' );
            labelSpan.style.display = 'block';
            labelSpan.style.width = labelWidth;
            labelSpan.innerHTML = labelContent;
        this.style.display = '-moz-inline-box';
        this.innerHTML = null;
        this.appendChild( labelSpan );
      } ).end();
    
      // Show forms
      $( 'form' ).show().end();
    }
    


    along with the jquery to my template in order to make it work. I'm referring to an article from A List Apart and it seems that my problem comes from Mozilla's lack of support for inline-blocks. I'm using the styling for my forms that is used in the article, which looks fine in Safari, but like shi* in mozilla because of this. I'll let you know how it works out.
  • Yup, that's the issue. Safari lines them up perfectly, Mozilla murders them.
  • brettbrett FoxyCart Team
    Ah, inline blocks. Yeah, I'd hate to see what it's gonna look like in IE...

    Do you really need to resort to javascript to style them? Couldn't you do m... huh, you're doing some appendChild stuff too.

    Well, if it's working, then beautiful! I'd love to see the finished product.
  • So I got everything to play nice without the Java. Thanks for the rapid response.
  • brettbrett FoxyCart Team
    Did you end up using inline-blocks? I'd love to see how you got it working if so.
  • Actually I just went back to the form that you guys setup in the doc and used that. I found that the error was on my end with my template css, something I overlooked (a custom width) and didn't have to use the inline-stuff. :D
Sign In or Register to comment.