PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Need CSS for consistent input box positioning

  1. My form is set up with label placement "left_aligned".

    I have a list of products, which vary in price significantly. For example, one item may be £300.00 and another £3,000.00.

    As you can see, £3,000.00 takes up much more space than £300.00

    What my problem is that the price label also takes up space, which means that the input box for quantity is floated to the left of the pricing label at differing amounts each time.

    This looks quite ugly.

    http://s8.postimage.org/bnpbifqp1/Screen_shot_2012_09_05_at_09_45_05.png

    I have attempted to change the css for .ginput_product_price to display block, and then setting a standard width, however this makes things look even worse.

    http://s8.postimage.org/ral69jtut/Screen_shot_2012_09_05_at_09_45_32.png

    Are you able to help me with the css to make this look consistent at all? I am surprised nobody else appears to have had a similar issue on these forums.

    Posted 12 years ago on Wednesday September 5, 2012 | Permalink
  2. Adding the "display: block" property to your inputs is going to force them to a new line like you've discovered and it's not going to get you where you need to be. Screenshots are nice, but please post a URL to your form page and we can inspect your form and give you some specific guidance to help you out.

    Most likely you can set a specific width for your label and that will work but without seeing your form, I can't tell you for sure.

    Posted 12 years ago on Wednesday September 5, 2012 | Permalink
  3. Hi there,
    Thanks for the reply.
    http://goldealers.co.uk/precious-metals-calculator/?metal=Coins

    Posted 12 years ago on Wednesday September 5, 2012 | Permalink
  4. Try dropping this into your theme's stylesheet:

    [css]
    .gform_wrapper span.ginput_product_price {
    width: 100px;
    display: inline-block;
    }

    Result

    Posted 12 years ago on Wednesday September 5, 2012 | Permalink
  5. Rob is the man. That is all.

    Posted 12 years ago on Wednesday September 5, 2012 | Permalink