WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Form fields too short / not tall enough / cut off (16 posts)

  1. davkrev
    Member
    Posted 1 year ago #

    The woocommerce checkout and other form fields seem too short. Does anyone know how to adjust this so that the text entered can be visible?

    See attachment here:
    http://i42.tinypic.com/14wwp5y.jpg

    http://wordpress.org/extend/plugins/woocommerce/

  2. neuroticartist
    Member
    Posted 1 year ago #

    I seem to be having the same problem although you are at least able to view a tiny center portion of your text and I am unable to see anything as if the padding around the field pushed the inside into nothingness.

    http://austinwebdesign.us/checkout/

    its really strange. The only WOO input field that seems to be ok is the special coupon code field and I checked my contact page and those fields seem ok. I also looked at all of it in firebug and the css seems ok too.

  3. neuroticartist
    Member
    Posted 1 year ago #

    I managed to get around it by adding height: 26px; to this entry in the woocommerce.css

    .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea {

    but that still doesnt fix the real issue

  4. davkrev
    Member
    Posted 1 year ago #

    Tried to edit that in the css but couldn't get it to work/fix the problem on my end :\

  5. elames
    Member
    Posted 1 year ago #

    Do you have FIREBUG plug in? Get it. Then you can inspect each element of the page and edit the custom css with it.

  6. neuroticartist
    Member
    Posted 1 year ago #

    I used firebug but it didnt help much with this issue, so what I did was comment out ALL of the form formatting in my themes style.css by putting a /* and a */ before and after all of it, so basically all my theme form formatting was removed... and it fixed it. my form looked bad but it showed me that the problem came from a conflict in my themes css vs. the input field styles in the woocommerce.css.

    try it, then one by one add your styles back and see where it causes the problem

  7. neuroticartist
    Member
    Posted 1 year ago #

    for me it turned out to be crappy codec from Template Monster(They suck sooooo bad, I dont know why I even bother).

    in the theme CSS there was this line

    input[type="text"] {
    height:16px;

    and there was no closing } on it. I just commented it out entirely and everything seems to be find.

    Just start by commenting out ALL of your themes form CSS and narrow down from there.

  8. davkrev
    Member
    Posted 1 year ago #

    I have tried disabling ALL of my theme's css by renaming the files to .cssbad (also a TM theme) and still have the field size problem. I think it has to be something on the woocommerce css since other fields on my site are okay - for example on our contact form.

  9. neuroticartist
    Member
    Posted 1 year ago #

    my contact page form was ok too, i think it has to do with a conflict between the field names or something. My theme is pulling things from everywhere, TMs coding really sucks.

    do you use Firebug? download it like elames said, it will show you exactly what CSS is being used for anything you want. find what its using in what files, disable and enable one by one. if all else fails, another option is to by a template from WooThemes so you have access to support there.

    and for the record again, Template Monster sucks *LOL* I hate editing their crappy code.

  10. davkrev
    Member
    Posted 1 year ago #

    I am trying to edit woocommerce css but it is all compressed and I cannot read it as it seems to have no formatting. Do you have a css file that is formatted? Re-downloaded the woo plugin and its the same mess.

  11. neuroticartist
    Member
    Posted 1 year ago #

    what are you using to look at the CSS file?

  12. davkrev
    Member
    Posted 1 year ago #

    dreamweaver, notepad, anything. it seems to be "minified" or compressed where I can sort through it easily.

  13. neuroticartist
    Member
    Posted 1 year ago #

    open it in dreamweaver, click on the "commands" in the menu up top and select "Apply Source Formatting".

    Voila! save and re-upload it and check everything out in firebug to see whats going on.

  14. davkrev
    Member
    Posted 1 year ago #

    Got it fixed! Had to add height: 26px to every input-text section in the woo css.

    Thanks!

  15. neuroticartist
    Member
    Posted 1 year ago #

    no problem. Its more if a work around than a fix since the problem is still there somewhere but we're splitting hairs at this point, if it looks good in all browsers then who cares right?

    cheers

    Roz

  16. CreativeMediArts
    Member
    Posted 3 months ago #

    HI,
    I too have the similar issue with my wordpress website login page

    http://www.shabdyuddh.com/wp-login.php

    the input field height of user name and password is too less and the input text size is also big.

    I don't have much knowledge of CSS.

    Please help get this fixed up!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic