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.

Advanced field breaks out

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Fjallwebb
    Member

    Hi the advanced field breaks out of the form and when typing the fields jump down and it´s just messy, please have a look on this site, http://skibua.spacedout.se/book-skiutstyr/
    (it´s on the second page)
    screenshot; http://i45.tinypic.com/14lhda0.png

    Posted 11 years ago on Thursday December 6, 2012 | Permalink

  2. Richard Vav
    Administrator

    The list field table is breaking the bounds of the form because of the css rule shown below which can be found in your themes base.css file is setting a minimum width of 210px for the input fields, if you comment out that min-width line by placing /* at the start of it and */ after it you should find your problem is resolved.

    input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #777;
		margin: 0;
		min-width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
    Posted 11 years ago on Thursday December 6, 2012 | Permalink

  3. Fjallwebb
    Member

    Hi, okay and why is it white?
    Do you mean like this?

    input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #777;
		margin: 0;
		/*min-width:/*
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
    Posted 11 years ago on Friday December 7, 2012 | Permalink

  4. Richard Vav
    Administrator

    Actually it wants to be, your closing asterisk and forward slash are the wrong way round

    /*min-width: 210px*/

    As for your second point, if you are asking how to kill the background from the list field that is due to the following styles found is styles.css

    table td {
background: none repeat scroll 0 0 #EEE;
border-top: 1px solid white;
color: #333;
padding: 8px;
}

    there is also an almost identical rule for 'table th', to kill the background you can add something like this

    .gform_wrapper table td, .gform_wrapper table th {
 background:none;
}
    Posted 11 years ago on Friday December 7, 2012 | Permalink

  5. Fjallwebb
    Member

    Okay, thank´s but I really can´t see any difference when I adding /*min-width: 210px*/
    Where should you put it, (currently base.css)

    Posted 11 years ago on Friday December 7, 2012 | Permalink

  6. Richard Vav
    Administrator

    It looks like you sorted the main width issue

    Posted 11 years ago on Friday December 7, 2012 | Permalink

  7. Richard Vav
    Administrator

    I would recommend you set the width of the inputs to something like 75% because at the moment they are too wide which is why the border is missing from the right and when you fill in one of the inputs it drops down the page slightly so to prevent that you would add something like this to your stylesheet

    .gform_wrapper .gfield_list input {
width: 75%;
}
    Posted 11 years ago on Friday December 7, 2012 | Permalink