wp touch pro « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

mattar12
Member
I'm having a small formatting issue while using wp touch pro with gravity forms. One of my fields is cut off at the right side of the page....the site is http://paulson-insurance.info/contact-us/ ...but that wont show you the mobile version, so here is a screenshot:

http://paulson-insurance.info/screenshot_iphone.PNG

WP Touch comes with CSS styling built in for gravity forms, but they don't include anything for the right margin. This is what WP Touch has built into their compact.css:
```
[css]
/* @group Gravity Forms */

.gform_wrapper li, .gform_wrapper form li{ list-style-type:none!important;
	padding-left: 30px;
}

.gform_wrapper .gform_footer {
	margin-top: 0;
	margin-left: 20px;
}

/* @end */
```
I added code that I found in the forum to fix the left side of the fields being cutoff...add this to wptouchpro/style.css:
```
[css]
body.wptouch-pro .post .gform_wrapper .gform_body ul.gform_fields {text-indent:0!important; margin:0; padding:0}

body.wptouch-pro .post .gform_wrapper .gform_body ul.gform_fields li {padding-left:0!important}
```
what do I have to add to fix the right side?
Posted 13 years ago on Sunday April 17, 2011 | Permalink
Kevin Flahaut
Administrator

Not really sure. Best I can tell so far is that it's related to the input type. The text field above doesn't get cut off, but the field that's being truncated is using the HTML5 "tel" input type. If you notice, the sizing on that (height as well) is different from the other fields so it must be inheriting different CSS properties from somewhere.

You can try turning the HTML5 output off, or changing that field to a standard text field and see if that remedies the issue. If not, I would look for styling rules that specify input[type=text] in your theme CSS and then you might want to include input[type=tel] along with them so the phone field inherits the same rules.

Posted 13 years ago on Sunday April 17, 2011 | Permalink
mattar12
Member

I've been toying with the right padding...I added "padding-right: 3px;" so the gravity forms section of compact.css now looks like this:

.gform_wrapper li, .gform_wrapper form li{ list-style-type:none!important;
padding-left: 30px;
padding-right: 3px;
}

.gform_wrapper .gform_footer {
margin-top: 0;
margin-left: 15px;

}

With the padding at 3, the right edge of a field with an alignment of gf_right_half is just barely cut off...with a padding of 4 the field looks right, but moves the field down a line, making the form staggered...thoughts?

Posted 13 years ago on Sunday April 17, 2011 | Permalink
mattar12
Member

sounds like it maybe a question for the wp touch forum. Thanks!

Posted 13 years ago on Sunday April 17, 2011 | Permalink
Kevin Flahaut
Administrator

The input widths are set as percentages of the available horizontal space. Adding padding to the right or left effectively increases the size of the inputs and the horizontal real estate they use. That's why you're seeing issues. (too much padding causes the input to wrap to a new line) If you want to add left or right padding, you may need to reset the width percentages on the inputs.

Posted 13 years ago on Sunday April 17, 2011 | Permalink