Webform text area resize upon save (in D7)

Well that is pretty odd! Obviously, that isn't what happens to everyone else, so I am going to assume that there is something unique about your Drupal setup which is interfering with either the javascript or the CSS for arrange fields.

Testing in Garland is a good idea, as it's fairly neutral. The only advice I can offer is to one-by-one, disable modules which you think might be to blame, *clear your cache*, and then try Arrange Fields again to see if the problem is still there. This would eventually let you track down the problem (one hopes).

Sorry-- I wish I had better news!

Richard

The title is still correct but I have just the opposite: when I save my text fields height reduce to about 5px.
I also use FCKeditor as WYSIWYG and the height of the fields is not correct. I have to guess to get it right.

I just installed the module today but definitively in love with it. I'll do my best to get you the info you need to fix these problems.

Thanks in advance
FreeFox

Here my screenshot collection

That is most odd. I see the positions are saved, but, as you said, the heights are messed up for some reason. Are you using any special Fields (cck) modules to create those fields?

Just as a test, have you tried to explicitly set the height of your inputs (in your theme's CSS) to, say, 20px? Just to see if you can make it stick there?

Ex: input{ height: 20px !important; }

If *that* doesn't work for you either, it might point towards something happening to your CSS on your site.

Speaking of, try turning off all caching and css/js optimization on your site, then clear the cache. Also, does this happen in all browsers (Firefox, Chrome, IE)?

Richard

Im having exactly the same issue except I notice this with inline or block default labelling.

Funny thing is you dont need to change any positioning of anything, just clicking save makes the text fields grow a little in height each time.
Another interesting thing is that the reverse happens to 'text area' items - they actually shrink on save and have to be readjusted. 'Text Field' items dont have the up/down adjustment arrow to altering their height and changing the height via % or px options just changes the backdrop height and not the field itself. Clicking reset position data sets everything back to the initial heights.

Using 7.x-1.1 of arrange and 7.x-3.11 of webform (will try updating to 7.x-3.13 tomorrow). It could be a css issue - havent had the chance to test it on a different theme yet, will try that tomorrow also.

hello guys,

i am having the same issue over here. drupal version 7.8 and recent webform 7.x-3.13

can confirm I still get the issue with different themes and with the latest version of drupal and webform

Hrm. I really wish I knew what was going on with you guys' setups! I swear I'd try to fix it, if only I could recreate the problem on my end. But so far, it always works for me as normal. If anyone figures out a way to recreate it, (and can switch between working and broken at will) by all means, please post here!

Richard

Another module im using is http://drupal.org/project/webform_civicrm but can confirm the problem also occurs with non civi generated text fields

had an idea it may be javascript related:

This is what loads on my page...

<script src="http://www.mywebsite.com.au/misc/jquery.js?v=1.4.4" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/jquery.once.js?v=1.2" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/drupal.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/ui/jquery.ui.core.min.js?v=1.8.7" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/ui/jquery.ui.widget.min.js?v=1.8.7" type="text/javascript">
<script src="http://www.mywebsite.com.au/modules/overlay/overlay-child.js?v=1.0" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/libraries/shadowbox/shadowbox.js?v=3.0.3" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/ui/jquery.ui.mouse.min.js?v=1.8.7" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/ui/jquery.ui.draggable.min.js?v=1.8.7" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/ui/jquery.ui.button.min.js?v=1.8.7" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/ui/jquery.ui.position.min.js?v=1.8.7" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/ui/jquery.ui.resizable.min.js?v=1.8.7" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/ui/jquery.ui.dialog.min.js?v=1.8.7" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/modules/shadowbox/shadowbox_auto.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/modules/views_slideshow/js/views_slideshow.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/modules/views_slideshow/contrib/views_slideshow_cycle/js/views_slideshow_cycle.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/modules/arrange_fields/js/arrange_fields.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/modules/arrange_fields/js/arrange_fields_dialog.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/misc/textarea.js?v=7.8" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/modules/arrange_fields/js/arrange_fields_node_edit.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/modules/webform/js/webform.js?lrcpe4" type="text/javascript">
<script src="http://www.mywebsite.com.au/sites/all/modules/views/js/jquery.ui.dialog.patch.js?lrcpe4" type="text/javascript">

Subscribe

I found a small bug in the Arrange Fields code which was causing certain webform fields to not be recognized as webform fields. I am not sure if this is the root of everyone's issue, but I would encourage you guys to upgrade to my latest release (1.4), clear your caches, and tell me if it fixed anything at all.

Thanks for hanging in there,
Richard

I believe this problem is fixed! Please test the latest version, 1.5, to be sure, and re-open if there are still problems.

Thanks to user drizzi (http://drupal.org/user/226909) for letting me debug on his server, I discovered the problem in-action. When you set the label to be "inline" in webforms, a strange interaction with CSS and jQuery UI caused textfields to resize strangely. So, I just told AF to ignore the CSS from Webforms' label being set inline. From now on, use Arrange Fields' configure dialog to set the label as inline or not.

Remember to clear caches after upgrading, to make sure it switches the CSS back over.

I just installed 1.5 for the first time and am experiencing this issue.

Well that's a bummer! On the chance that you are having a different, but similar problem, can you post a screenshot of the problem in action? Also, have you tried switching themes to Garland, trying out different browsers, clearing the cache, etc?

Richard

Also-- are you using webform module's "inline label" option? If so, when you turn it off, does it fix the problem?

Richard

I am having the same problem with shrinking textfields. Just installed the latest version. I'm using Drupal 7.0, Webform 7.x-3.12, Webform CiviCRM Integration 7.x-2.0, and the Acquia Marina 7.x-1.0-rc3 theme.

Well darn. I'm back at my original problem-- unless I can recreate the problem (or see it happening live on someone's site that I have admin/FTP access to) I'm not sure I can offer any more help :(

Richard

I can also confirm this is happening, on 6.x - 1.4

I browsed into the variables table, and found the variable for my form (it has the node id in the name).

My text fields were all being set to 7px high. I replaced it with 12px everywhere, and tried to plug it back into the database. That didn't work, at first it ignored the new setting (on both the webform display page and the arrange fields page); then it had the effect of 'reset position data'

Here is the database variable, from which it appears the css on that webform page is created:

s:4718:"edit-civicrm-1-contact-1-contact-organization-name-draggable-wrapper,0px,0px,input,397px,12px,,45px,,top,;edit-civicrm-1-contact-1-cg11-custom-28-draggable-wrapper,60px,0px,,0px,0px,,,inline,middle,;edit-civicrm-1-contact-1-cg11-custom-30-draggable-wrapper,90px,0px,,0px,0px,,,inline,middle,;edit-civicrm-1-contact-1-cg11-custom-31-draggable-wrapper,120px,0px,,0px,0px,,,inline,middle,;edit-civicrm-1-contact-1-cg11-custom-79-draggable-wrapper,90px,340px,,0px,0px,,,inline,middle,;edit-civicrm-1-contact-1-cg11-custom-80-draggable-wrapper,220px,0px,,0px,0px,,,inline-block,top,;edit-civicrm-1-contact-1-cg11-custom-32-draggable-wrapper,250px,0px,textarea,519px,54px,,,,,;edit-civicrm-1-contact-1-contact-privacy-draggable-wrapper,710px,0px,,0px,0px,,,inline,middle,;edit-civicrm-1-contact-1-cg11-custom-84-draggable-wrapper,220px,340px,input,16px,12px,,,inline-block,top,;edit-civicrm-1-contact-1-address-street-address-draggable-wrapper,480px,0px,input,207px,12px,,,,,;edit-civicrm-1-contact-1-address-supplemental-address-1-draggable-wrapper,530px,0px,input,208px,12px,,,,,;edit-civicrm-1-contact-1-address-city-draggable-wrapper,580px,0px,input,208px,12px,,,,,;edit-civicrm-1-contact-1-address-postal-code-draggable-wrapper,630px,0px,input,40px,12px,,,,,;edit-civicrm-1-contact-1-address-postal-code-suffix-draggable-wrapper,630px,80px,input,29px,12px,,,,,;edit-civicrm-1-contact-1-address-country-id-draggable-wrapper,480px,260px,,0px,0px,,,,,;edit-civicrm-1-contact-1-address-state-province-id-draggable-wrapper,530px,260px,input,14px,12px,,,,,;edit-civicrm-1-contact-1-phone-phone-draggable-wrapper,340px,230px,input,113px,12px,,,,,;edit-civicrm-1-contact-2-phone-phone-draggable-wrapper,340px,380px,input,77px,12px,,,,,;edit-civicrm-1-contact-3-phone-phone-draggable-wrapper,340px,490px,input,79px,12px,,,,,;edit-civicrm-1-contact-1-email-email-draggable-wrapper,340px,0px,input,199px,12px,,,,,;edit-civicrm-1-contact-1-website-url-draggable-wrapper,670px,0px,input,262px,12px,,,,,;edit-notes-draggable-wrapper,380px,0px,textarea,574px,62px,,,,,;edit-civicrm-2-contact-1-contact-first-name-draggable-wrapper,770px,0px,input,84px,12px,,,,,;edit-civicrm-2-contact-1-contact-last-name-draggable-wrapper,770px,110px,input,69px,12px,,,,,;edit-civicrm-2-contact-1-contact-job-title-draggable-wrapper,770px,210px,input,84px,12px,,,,,;edit-civicrm-2-contact-1-phone-phone-draggable-wrapper,770px,460px,input,105px,12px,,,,,;edit-civicrm-2-contact-1-email-email-draggable-wrapper,770px,320px,input,105px,12px,,,,,;edit-civicrm-3-contact-1-contact-first-name-draggable-wrapper,890px,0px,input,82px,12px,,,,,;edit-civicrm-3-contact-1-contact-last-name-draggable-wrapper,890px,110px,input,71px,12px,,,,,;edit-civicrm-3-contact-1-contact-job-title-draggable-wrapper,890px,210px,input,81px,12px,,,,,;edit-civicrm-3-contact-1-phone-phone-draggable-wrapper,890px,460px,input,103px,12px,,,,,;edit-civicrm-3-contact-1-email-email-draggable-wrapper,890px,320px,input,107px,12px,,,,,;edit-civicrm-4-contact-1-contact-first-name-draggable-wrapper,1000px,0px,input,82px,12px,,,,,;edit-civicrm-4-contact-1-contact-last-name-draggable-wrapper,1000px,110px,input,67px,12px,,,,,;edit-civicrm-4-contact-1-contact-job-title-draggable-wrapper,1000px,210px,input,83px,12px,,,,,;edit-civicrm-4-contact-1-phone-phone-draggable-wrapper,1000px,460px,input,104px,12px,,,,,;edit-civicrm-4-contact-1-email-email-draggable-wrapper,1000px,320px,input,107px,12px,,,,,;edit-civicrm-5-contact-1-contact-first-name-draggable-wrapper,1110px,0px,input,81px,12px,,,,,;edit-civicrm-5-contact-1-contact-last-name-draggable-wrapper,1110px,110px,input,70px,12px,,,,,;edit-civicrm-5-contact-1-contact-job-title-draggable-wrapper,1110px,210px,input,81px,12px,,,,,;edit-civicrm-5-contact-1-phone-phone-draggable-wrapper,1110px,460px,input,105px,12px,,,,,;edit-civicrm-5-contact-1-email-email-draggable-wrapper,1110px,320px,input,113px,12px,,,,,;markup_element_gs71T1Pahy,740px,0px,,0px,0px,~~markup_element~~,585px,83px,SCHOOL CONTACT #1: ,border: 2px dashed #999999_~!sc%~_ padding: 4px_~!sc%~_background-color:#dddddd_~!sc%~_,75,;markup_element_kDbvmlCnl4,850px,0px,,0px,0px,~~markup_element~~,586px,91px,SCHOOL CONTACT #2:,border: 2px dashed #999999_~!sc%~_ padding: 4px_~!sc%~_ background-color:#dddddd_~!sc%~_,75,;markup_element_96fBwBZi6W,970px,0px,,0px,0px,~~markup_element~~,586px,77px,SCHOOL CONTACT #3:,border: 2px dashed #999999_~!sc%~_ padding: 4px_~!sc%~_ background-color:#dddddd_~!sc%~_,75,;markup_element_wkxkrgG3Az,1080px,0px,,0px,0px,~~markup_element~~,586px,82px,SCHOOL CONTACT #4,border: 2px dashed #999999_~!sc%~_ padding: 4px_~!sc%~_ background-color:#dddddd_~!sc%~_,75,;edit-submit-draggable-wrapper,1320px,70px,,0px,0px,,,,,;~~maxBottom~~,1351px";

Thanks for posting.

The fact that it really is saving the heights as that small tends to point me back to my original theory that it is being caused by some kind of javascript malfunction. Javascript is what determines the heights, while PHP saves them to the database.

Have you tried in other browsers?

I'm having position/heights problems too. This is happening in Firefox and Safari but there is one diffrence.
In Safari after opening a form for editing the fields are positioned fine, after moving them and saving (or just saving) the heights get messed up - they become very short. The width seems to be ok.
In Firefox all the form elements before saving anything show up in the left top corner positioned to 0,0 a guess. Then after moving and saving the heights get messed up just like in Safari.
I made print screens to show you how it looks. I'm using here Drupal 7.7 and Arrange Fields 7.x-1.5.

I'm really sorry that this continues to be a problem for some folks. If anyone who is having this problem would like to give me temporary FTP access to their site, so I can go in and experiment and try to figure the problem out (backup your site & db first-- I might break something), I'd be happy to give it a try. I have never seen the problem happen on my own box, and w/o being able to reproduce the problem, I don't know of any way that I can fix it.

If anyone would like to take me up on my offer, you can email me privately using the contact form when you click on my username, then click the "contact" link at the top.

Richard

#5 fixed this for me. i used
#webform-client-form-2 input.form-text { height: 30px !important; }

I'm glad to hear that worked at least!

Same problem (height gets tiny) here. I have a test server you could take a look at... shout if you are interested, i'll backup and give you a user...

Whats interesting after testing, is the fields don't immediately get small. It seems in my case each save loses a pixel or 2 of height each time a save is performed. No field editing is required, just resaving causes this.

Odd. I would be thrilled to check it out on your test box. An FTP/SFTP account should be all I would need. Please contact me using the contact form on my user account page when you are ready.

Thanks ;) Hopefully I might finally catch this bug.
Richard

Let me know when you wish to have a look at this. I did pm you yesterday, account now locked again but as soon as you want a look I can unlock it.

I sent you an email back, maybe you didn't get it. I saw the username & password, but you never told me an ftp address ;)

Richard

Hey Richard. No I didn't get it, will check my profile settings.

Unfortunately I have to temporarily withdraw my dev site - doing a load of tweaks at the moment prior to launching a new service (should be done end of February). I did test on a completely blank site with the default theme and it doesn't resize the fields - so it's definitely theme based...

Not a problem. Just to double-check, you are running Drupal 7, right? And this issue is happening with the Webform module, or is it with any form?

Richard

(Changing title of this issue to be more specific. If anyone has this problem in D6, please open a separate issue)

Hi All,

Have done quite some debugging on this issue, and if I disable Formalize, which in my case is activated in my Omega Theme, then is works.

Now I just don't get the benefit of Formalize, which I would really like.

Hope, this can get you somewere in fixing it.

rg
Richard

Wow, thanks for the tip Richard. Great name, btw. I will check that out and see if I can re-create the problem using that theme & formalize. For some people this happens with just plain Garland, which leads me to believe this problem can occur for more than one reason.

I appreciate the time you spent debugging this one, though. Thanks

Richard

Hi

No problem.

Is there btw a reason you save the height of the textfield ? I'm not given the option to change it in the layout section. I can also fix the problem, by disabling the inline style height, and thereby use the height value from formalize.

rg
Richard

You know, I think at one time I did need to keep up with the height in order to cope with a different bug, but I'm not sure I even need to do that anymore. I will try to disable it for textfields and see if everything still works on my end. I'm going to kick myself if that's all it takes to fix this issue.

Will post back with my results.

Thanks
Richard

Okay, I made a relatively small change to the .module file for arrange_fields. I will post it here. If anyone having this problem would please try it out-- just delete the existing arrange_fields.module file and replace it with this one (D7 only). Make sure to rename it to just "arrange_fields.module". No .txt at the end.

If I can get at least one person to confirm that it fixed anything for them, I will go ahead and put it into a new release.

Thank you,
Richard

Hi,

Confirmed. The textfield looks good in my case now.

I still see another issue though, and this is related to the use of Formalize (I think)

If I have a date field (using the popup calender) and a time field.

When I in the layout section make it look good, then they are too close when the user views it. The calendar gfx is partly hidden.

rg
Richard

I gotcha. I might not be able to handle that one in this next release. You can always try manually tweaking the CSS in your theme for this particular case. Or actually, could you just move the time field a little futher away, so that when you view it, it doesn't get cut off? If that doesn't really work for you, please open a new issue specific to this. I can't guarantee that there's anything I could do to, programming-wise, but maybe others will see your post and have some ideas.

In the meantime, I will roll my changes into a new release for both 6 and 7. I'm really REALLY crossing my fingers that this fixes the issue (and doesn't break something else)!

Richard

Okay, everyone else who is having this problem: I *hope* I have this issue finally fixed! Special thanks to RichardB for the suggestions. Please try the latest release, 1.7. I also have a new D6 version out, 1.5, which has the same code changes there if anyone was having any D6 problems.

I'm going to very tentatively mark this issue as "fixed." Of course, if anyone sees it again, please change the status back to Active.

Here's hoping!
Richard

Hi,

If I adjust the layout, then it looks ok. Now it just looks weird in the layout, but ok in what the enduser sees.
Guess, I can't easy have the best of both worlds, nice look forms acrose browers and easy placement of elements :-)

rg
Richard

I am still getting this in 7.x-1.7. The theme is danland, but I don't know if that matters.

Ugg. Fair enough. Well, I'm back at square-one, then. I still have yet to ever actually see the problem happen myself. If anyone with this problem would let me have access to their site (so I could try to debug it as it happens), I would really appreciate it.

Until then, I'm afraid I'm all out of ideas.
Richard

I had this problem before and had to delete and recreate the field to get it back. I am using Drupal 6.25 with Zeropoint theme. So I don't think it's a Drupal version issue.
If I get it again, will post it here and give you access.

On a similar note, the last field on my form gets longer and shifted 1px to the right. I will open a new issue for this.

Hi,

I've been reading this thread and I see this problem has been causing some headaches over the past few months. First of all, great module! Has helped me alot to create some nice webforms..
However, specifically with the text-area element I am experiencing a similar issue.
I want to outline this element with the other input elements am using but not seem to able to pull it off.
Everytime I save, the textarea element changes in size.. Am not able to outline it perfectly with the rest.
If you want i can give you access to this dev-site.. just lemme know!
Thanx!

Hi. I use 7.x-1.11
Still have this problem.

Joining the party - also using 7.x-1.11. However I've had the same problem with every release in the couple of years I have been using it.

In my case, every save was decreasing the width of the text elements. Possible causes to me were field_groups, Shiny admin theme, and Admin theme modules.

I had a good idea that it had to be css related because when I visited:
http://example.com/arrange-fields/registration the arrange fields form displayed in the Site frontend theme and hitting save repeatedly caused no decrease in text field size.

When I tried to edit the same form, this time by visiting
http://example.com/admin/structure/types/manage/registration/arrange-fields arrange fields this time displayed in the admin theme and would drop 22px for every save.

I inspected the CSS and found that the admin theme had this CSS:

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

border-box - This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

I overrode this css for the admin theme by adding:

form.arrange-fields-container * {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

Viola! No more text fields decreasing in size on save. Hope this helps others.

Interesting fix! Thanks for sharing.

Richard

SpamSammy thanks for posting your fix, but my problem must be different because I tried your code and it didn't help.

My fields all randomly resize on save - some shrink, some grow. I'm using Bartik for my admin theme, BTW.

Anyone else having this?

Did anyone ever figure out how to stop this from happening.

#50 not working for me. Same issues with height in 1.11

I incorporated the fix in #50 into the css file which ships with Arrange Fields.

The issue is that jQuery's .height() and .width() functions always seemed to give unreliable values for textareas, specifically when that box-sizing property wasn't set to "content-box".

So, I am feeling like this is a strange bug in jQuery. At least, the version that ships with Drupal.

I have a feeling this isn't going to be a fix for everyone, but I think it does tackle a large issue that Sammy points out; that several themes apparently use a box-sizing property which is unexpected to jQuery (what I use to calculate the width/height of textareas).

I am going to mark this as "fixed." If this exact issue continues, please re-open. But, if you have a new issue (not solved by the new CSS changes) then please open a new issue. To be specific, this issue is that textareas grow or shrink a little every time you hit the "Save position data" button.

Richard

Another quick note-- remember to clear your cache, since this newest version includes a CSS change. If you still see the textareas changing size, refresh your browser's page and cache and try again.

So still an issue for some themes.
I've got a dev site someone could play with and see this. Every save shrinks the fields, inline or not.
Commerce Kickstart sub-theme (sub-sub-theme of Omega)