Skip to content
This repository

Authenticity token div in form_for causing display issues #6403

Closed
gaelian opened this Issue · 8 comments

5 participants

Gaelian Ditchburn Angelo Capilleri Andrew White Maksim Horbachevsky Rafael Mendonça França
Gaelian Ditchburn
gaelian commented

I've run into a display issue being caused by the automatically added div within a form generated by form_for in Rails 3.2.3. Of course this div causes no problems for me in Chrome, FF, etc. but surprise, surprise, In IE 8/9, the div is causing me a display issue and because the styles are inline on the div, it's not as easy as it could be to fix.

Currently, the automatically added div, plus contents, looks something like this:

<div style="margin:0;padding:0;display:inline">
  <input name="utf8" type="hidden" value="&#x2713;" />
  <input name="_method" type="hidden" value="put" />
  <input name="authenticity_token" type="hidden" value="xyz" />
</div>

If the inline style on the div is changed to display:none; this seems to appease IE 8/9.

I came by this old ticket on Lighthouse (marked as resolved) which discusses the issue and a possible change to display:none but it appears nothing has come of this? Alternatively, I could also see the addition of a class to the div as a workable solution, which may be a little more flexible than just adding display:none; inline.

Does anyone know why the change to display:none; apparently didn't go through?

Angelo Capilleri

Hi @gaelian, can u paste your form_for block? Thanks

Andrew White
Owner

@gaelian what's the display issue? Can you post a screenshot?

You should be able to target the div tag like this:

form > div:first-child {
  display: none !important;
}

assuming that you have no other hard-coded forms on the page that has a div tag as a first child then you should be fine.

Gaelian Ditchburn
gaelian commented

Hi guys,

@acapilleri: this is the form_for block:

= form_for asset, :url => account_asset_short_url_path(asset), :remote => :true, :html => { :id => 'short_url', :method => :put } do |f|
  = f.submit('Shorten URL', :class => "short_url")

I'm using HAML in this instance.

@pixeltrix: here are two screenshots showing the issue as seen in IE 9. The first is with the div as is, the second is with the inline style on the div updated to display:none; using IE's developer tools. As you can see, the div with display:inline; appears to be adding what I initially interpreted as a phantom margin or padding somewhere that pushes the button(s) down undesirably. It was only later that I discovered changing the div to display:none; fixed the problem.

Thanks for the suggested workaround, I knew there would be a number of ways I could get over this issue. But I guess my original question still stands: is there a reason that display:none; or some other possibly better solution hasn't been implemented? Seems like this is an (admittedly small) case of configuration where it should not be required. Does display:none; in this case cause some other issues I'm not aware of?

Andrew White
Owner

@gaelian what's the styling on the button? Is it display: block? What you're seeing is the button being wrapped onto a new line and IE doesn't collapse the line-height where Safari, Chrome and FireFox do.

As for why display: inline and not display: none then there was some historical issues with form inputs inside elements with it set didn't get submitted so that may be why, but I think those have long since been corrected. I'd certainly give a :thumbsup: to a PR changing it.

Gaelian Ditchburn
gaelian commented

@pixeltrix I think you've hit the nail on the head. The submit button does indeed have display:block; set and its not actually relevant in this particular context, its just there because other submit buttons on the site require it. So this would seem to solve my little mystery. I'm glad someone is keeping track of IE's eccentricities. :P

But as for the more general question, assuming your :thumbsup:, I'd be happy to look into submitting a PR to swap out display:inline; for display:none;

Gaelian Ditchburn gaelian referenced this issue from a commit in gaelian/rails
Gaelian Ditchburn gaelian Switched to use `display:none` in extra_tags_for_form method.
The use of `display:inline` with the content_tag call in the
extra_tags_for_form method potentially causes display issues with some
browsers, namely Internet Explorer. IE's behaviour of not collapsing
the line height on divs with ostensibly no content means that the
automatically added div containing the hidden authenticity_token, utf8
and _method form input tags may interfere with other visible form
elements in certain circumstances. The use of `display:none` rather
than `display:inline` fixes this problem.

Closes #6403.
d5f6fdb
Maksim Horbachevsky

As I remember previous versions of JQuery (or may be other JS lib) had an option in form serialization method, that filtered hidden elements submitting. So this change can break it.

I'd suggest to replace display: none with position: absolute; left: -9999px; top: -9999px;

Gaelian Ditchburn

@fantactuka some testing seems to indicate that your alternate approach also fixes my original issue in IE8/9. Assuming it doesn't cause any other problems I'm not aware of, and that the Rails team is supportive, I'd be happy to update my pull request as you suggest.

But in any case, 'previous versions of JQuery (or may be other JS lib)' is a little vague. Do you have any more detail on exactly what we're looking at here?

And on a related note, for my own education, I'd be interested to know does the Rails team have a policy on how far back the backwards compatibility in Rails should go when it comes to JS libraries, browsers, and what not? /cc @pixeltrix

Rafael Mendonça França
Owner

I'm closing this one in favor of #6608

Andrew White pixeltrix referenced this issue from a commit
Gaelian Ditchburn gaelian Switched to use `display:none` in extra_tags_for_form method.
The use of `display:inline` with the content_tag call in the
extra_tags_for_form method potentially causes display issues with some
browsers, namely Internet Explorer. IE's behaviour of not collapsing
the line height on divs with ostensibly no content means that the
automatically added div containing the hidden authenticity_token, utf8
and _method form input tags may interfere with other visible form
elements in certain circumstances. The use of `display:none` rather
than `display:inline` fixes this problem.

Fixes #6403
7a085da
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.