Form fields too short / not tall enough / cut off
-
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
-
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.
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
Tried to edit that in the css but couldn’t get it to work/fix the problem on my end :\
Do you have FIREBUG plug in? Get it. Then you can inspect each element of the page and edit the custom css with it.
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
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.
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.
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.
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.
what are you using to look at the CSS file?
dreamweaver, notepad, anything. it seems to be “minified” or compressed where I can sort through it easily.
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.
Got it fixed! Had to add height: 26px to every input-text section in the woo css.
Thanks!
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
HI,
I too have the similar issue with my wordpress website login pagehttp://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!
- The topic ‘Form fields too short / not tall enough / cut off’ is closed to new replies.