Extra Space is being added

Thanks for trying out the module! The extra space you're describing is indeed being added by Arrange Fields when it resizes the container div, to ensure that everything fits into it.

You should be able to target that container with CSS and force it to be a certain size, using the !important directive in your CSS. Ex: height: 525px !important;

If that doesn't work, it may also be set using javascript, which is a little bit more of a hassle, so I would try doing it through CSS first.

Richard

Sorry-- to clarify-- the container class is on the [form] tag itself, not it's own div.

Sure thing ;)

Well, on my test site, with the theme I am using, my forms have a bottom padding of 2em. If you have something like that, you can remove it and that might help, without having to hard-code specific pixel values for all of your other sites.

Another option that *might* work (I haven't tested this!) is to add some CSS to your themes which adjusts bottom margin of the form. You'd just add it once to all your sites, w/o needing to know the specific pixel heights of each form.

Ex: bottom-margin: -10px;

Like I said-- that *might* work; I'm not sure.

If you're feeling adventurous, you could also always create a simple javascript function which runs on page load, which targets the form and reduces it's height by 10px or 20px of what have you. I know that probably isn't ideal (to depend on javascript like that) but it would keep you from having to enter specific pixel values for every possible form.

Richard

BTW-- not sure what you use, but for CSS work, the Firefox plugin "firebug" is an incredible help in tracking down CSS problems.

Well, w/o seeing the site myself, it's difficult to guess. My assumption would be that there are 1 or more elements within the form which are pushing it down (because of padding or the like) which would cause it to overshoot the height specification. Honestly, Firebug is the easiest way to tell. You said earlier that it no longer worked for you after upgrading Firefox. I would check to see if there is a newer version of firebug-- I've had firebug in every version of Firefox, including the newest one. Failing that, I would look for similar plugins for Chrome or IE. For a web developer, a good CSS inspector is basically a requirement.

Richard

I gotcha. Well, I will go ahead and close this issue then.

Thanks
Richard

The reason I don't really see this as a bug is because AF must specify the height of the container when it renders itself; that isn't something I can change, since thousands of other users are using AF w/o this problem (presumably).

Also, in my tests, I never had the same experience you did, which is probably due to the differences in our themes, installed modules, form components, etc. I'm not saying AF didn't play a role, I'm just saying that I can't program around every possibility, especially when I do not have access to your site in order to troubleshoot.

I'll tell you what, if you are interested in some in-depth troubleshooting, please change this status back to "active", and provide screenshots of the problem happening in a neutral theme like Garland, and I will be willing to try to help you figure it out. One of the reasons I closed the issue, though, is because it seemed like you didn't have time for all that.

Thanks,
Richard

In my case, the extra space was added because there was an hidden form element stuck on the bottom, and since i couldn't see it and move it, the form would be very tall.

One of the following approaches should be taken:

1. If the field is hidden, its position should be ignored when the max height is being calculated.

   var bottom = parseInt(top) + jQuery(element).height();
   if (bottom > maxBottom) {
     maxBottom = bottom;
   }

2. Show hidden fields and allow them to be arranged, just signaling with a diferent border color or so.

Just to change issue status.

where do we add this code. am currently experiencing this problem. There is a large space below the submit button after rearanging the fields on my form.

I have the same problem. Using Mix and Match theme.

It seems fine when the form is on the content area but when I put it in a block I get all the extra space at the bottom. The height seems to be calculated on the space required by the original layout. When to form is compacted by re-arranging the fields there is a whole lot of empty space at the bottom.

For me manually fiddling with the form height with CSS kind of defeats the point of having a drag and drop, self-adjusting layout system.

With appreciation and respect.

Rob

As a quick fix, use Firebug or another similar tool to change the hidden form element css to visible, then drag it somewhere it doesn't get in your way.

Sorry I have looked at firebug and even added this code to my style.css but no results:

.arrange-fields-container-webform-client-form-79 {
	height:2280px;
}

What is this "hidden form element" please?

Well, the hidden element may vary, but if you're confortable with jQuery you may find it using the console and some jQuery, like :hidden.

Look at the form after being arranged and check what's near the bottom with the magnifying glass inspector, as it can point you in the right way.

Also, bear in mind that that was what happened to me, but your situation may be different.

If you wish to take the css way, try to use !important to see if it sticks.

.arrange-fields-container-webform-client-form-79 {
	height:2280px !important;
}

#EDIT: I've checked and in my case was a computed field. If you're using something like that, it could be the culprit. Some field that has no widget, like the widget present in commerce module, can also be to blame, although not sure.

In my case the element was not hidden, it was just very tiny (2px X 2px), and empty.

If you know how to use the console, just run jQuery('.arrange-fields-control-handle').css('display','block'); when configuring the form to show all the handles that are present.

If you wish me to take a look, feel free to ask.

thanks. Adding "Important!" did the trick. Final code that worked is this (in case any other other person has the problem)

.arrange-fields-container-webform-client-form-79 {
         height:2280px !important;
}

adding the keyword "!important" did the trick. Thanks.

Hello everyone, I just wanted to give a quick update -- sorry, no solution yet.

I wanted to say that I thoroughly tested the hidden field issue on my test site, with Webform 7.x-3.18, and I cannot replicate the problems that some of you are having. I wish I had better news. I am using Garland and a fairly basic installation of D7.

At the moment, the best workaround is to manually set the height of your form one of your theme's CSS files, with the !important keyword, as pointed out in #23.

Richard

I found the error in the module. If I comment out this line it displays properly without all of the extra space at the bottom of the forms. Setting the height is not necessary in "arrange-fields.module". I am using the default Garland 7.22 and I moved all of the form's textboxes up, so the height is not correct.

      if ($wrapper_id == "~~maxBottom~~") {
        // This is actually the height of the container.  Let's set that,
        // then continue.
		
        //LETS NOT:
        //$css_markup .= " .arrange-fields-container-$fid {
        //              height: $pos_top;
        //                }";
        continue;
      }

@Jodo,

This isn't an error in the module. The module requires a height to be set for forms so as not to mess up other elements, and for most users, this doesn't seem to cause a problem. The issue seems to be related to when forms have hidden elements, and even then only in certain situations, and apparently related to certain themes (as I've not been able to replicate this issue on my test box).

Rather than making code changes, it would be best to make CSS changes (which won't get wiped out when you update the module).

Please see comment #23 for the best solution so far, for those experiencing this problem.

Since this issue is years old, and there is a workaround proposed, I'm going to close the issue.

Thanks,
Richard

There are no hidden elements in my form.

The error was identified in your module, so I hope you can fix it! Thanks.

Well, I'm not sure what's going on in your case, then. I do know that setting the height of a relatively positioned form, so that absolutely positioned elements can appear inside of it at specified positions, is needed/recommended in most situations, and with 5,000 other users of this module with that bit of code in place using it without problems, I just wouldn't call that an "error". And I can't "fix" something that 5,000 other sites are using and relying on, unless I know for a fact that changing it won't adversely affect the majority of other sites that don't have this problem.

I'm glad that for your situation, removing it seems to help, though I'd still recommend making CSS changes instead, or else your layout will break again the next time you update the module.

As I've said, for those experiencing this problem, I recommend the solution explained in #23 as a workaround.

Best of luck,
Richard

#23 is not a solution because it references a form ID number.

That is not going to work for new webforms that are created and Arranged using your module.

#23 is a workaround-- it assumes that users will look at their source to see what is their particular form_id, and then set the height manually that way.

You are correct that for anyone having this issue, they will need to add a similar line to their site's CSS for each form they are having issues with.

Thanks,
Richard

I'll tell you what-- I will do some extra testing when I have time, to see if there's a way to modify the height settings w/o breaking existing sites.

In the mean time, I have to stick with #23 (and #31 for clarification).

Thanks,
Richard

I just put out a new version (1.12). If anyone is continuing to have issues, please update to the latest version (making sure to clear your site cache and browser cache, since there have been CSS changes).

I did find a bug in jQuery which causes certain themes using an unexpected box-sizing property to not calculate height correctly. This has hopefully been fixed in this release by forcing the box-sizing property to be "content-box" within the arrange fields container form.

Also, after arranging your fields, save your positions twice, as sometimes jQuery does not calculate the height correctly if fields have been moved around before saving.