How To Handle The DIV Tag Around ASP.NET Hidden Inputs

0 comments suggest edit

One praiseworthy aspect of ASP.NET 2.0 is its much improved XHTML compliance. However, there is one particular implementation detail related to this that causes some web designs to break and could have been implemented in a better manner.

The detail is how ASP.NET 2.0 will wrap a DIV tag around hidden input fields. My complaint isn’t that Microsoft added this DIV wrapper, because it is needed for strict compliance. My complaint is that there is no CSS class or id on the DIV to make it easy to exclude CSS styling on it.

For example, here is a snippet from the output of a simple page.

<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Omitted" />
</div>

<div>
Hello World
</div>
</form>

It would have been nice if the author of this code could have simply added something like:

<div class="aspnet-generated">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Omitted" />
</div>

It is quite common for web designers to apply a specific style to all DIVs on a page, for example, adding a padding of 5px.

<style type="text/css">
  div {padding: 5px;}
</style>

Unfortunately, this leaves a gap where the ASP.NET generated DIV is located.

In a comment made on his blog, Scott Guthrie makes this remark on this topic:

You could modify your CSS to exclude the <div> we create by default immediately underneath the form tag.

In general I’d probably recommend having as broad a CSS rule as the one you have above - since it will effect lots of content on the page. Can you instead have it apply to a CSS class only?

Yes, you could modify the CSS to exclude the first child DIV of the FORM tag by using a child selector and a first-child pseudo class like so:

<style type="text/css">
  div {padding: 5px;}
  form>div:first-child {padding: 0; margin: 0;}        
</style>

Unfortunately, IE 6 doesn’t support child selectors nor first-child pseudo classes. Since IE 6 is still quite widely used, this is not a viable solution.

Regarding Scott’s second question, this isn’t always reasonable because many web designs apply certain styles most DIVs on a page and then exclude a few that shouldn’t have that style. In that situation, it takes more work to give every DIV a CSS class so you can apply the style to just that class. It is simpler to use an exclusionary approach in these cases. Simply apply the style to all DIVs and exclude the ones that need to be excluded.

Unfortunately, because of the way this DIV wrapper was implemented and, because of CSS non-compliance in IE 6, it’s not possible to exclude this DIV using CSS alone. It requires changing the markup.

Fortunately, there’s an easy solution with a slight change to your markup, but it requires changing your markup just a bit. Just wrap your content in a DIV with a specific ID.

<form id="form1" runat="server">
  <div id="main">
    <div>
      Hello World
    </div>
  </div>
</form>

And then style it like so.

<style type="text/css">
  div {padding: 0; margin: 0;} /* generated div */
  #main div {padding: 5px;} /* all other divs */
</style>

This is a lot easier (and higher performing) than trying to muck around with the output via the HttpResponse.Filter.

So while the solution is easy, it still bothers me that it is necessary. One main reason why is that I often get CSS designs handed to me and I have to go through and make sure to make this change appropriately. I’d rather just be able to plop a one line CSS change into every stylesheet like so:

div.aspnet-generated {padding: 0; margin: 0;}

On another note, one other interesting side-effect of this change in ASP.NET 2.0 is that many implementations for moving viewstate to the bottom of the page end up breaking XHTML compliance because they only move the input tags and not the entire DIV to the bottom.

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

27 responses

  1. Avatar for Aaron
    Aaron June 15th, 2007

    Hi Phil,
    I've been caught by this before I'm sure - although I generally use a similar markup to the #main example anyway.
    I also have a rule in my core css file which is:

    -
    #__VIEWSTATE, #__EVENTVALIDATION
    {
    display: none;
    margin: 0; // not sure why I need this
    padding: 0; // not sure why I need this
    }
    I do have some other css targetting input tags which may have meant I required this, but I can't remember exactly what it fixed [I suspect it was related to this: http://p2p.wrox.com/topic.a...].
    Incidentally, would it be worth sticking a display:none in your rule for the divs ?

  2. Avatar for Thomas Eyde
    Thomas Eyde June 15th, 2007

    OT: What would happen when the viewstate is moved to the bottom and the user clicks a button before it's completely loaded?
    Wouldn't we then get the dreaded corrupted viewstate exception?
    If so, the corollary is:
    1. moving the viewstate to the bottom of a page is not a good idea.
    2. if you have to do it, then using viewstate is not a good idea.

  3. Avatar for Craig
    Craig June 15th, 2007

    What about using that new ASP.NET 2.0 feature that lets you change output? I forget what it's called. Decorators? Something - can't remember. I know you can use it to remove the useless "action" on ASP.NET forms - might work for this scenario.

  4. Avatar for Craig
    Craig June 15th, 2007

    CSS Control Adapters - that's what it was.
    http://www.asp.net/cssadapt...

  5. Avatar for kevin
    kevin June 15th, 2007

    @phil - I love it. So simple and solves the problem. I agree, once I heard talk about using an HttpResponse.Filter I was turned off immediately.

  6. Avatar for Ben Rogers
    Ben Rogers June 15th, 2007

    I have to agree with Scott. The div tag is semantically neutral. That's the whole reason it exists. It really seems counter intuitive to me to say "I want all the generic block level elements on my page to have a padding of five pixels". Such tags are generic, so how could I possibly know what padding to apply to them? Only once I identify an element by assigning it a specific ID or set of classes will I be able to communicate how I want to display it. It takes that explicit association.
    Applying styles to all div (or span) tags seems awfully fragile to me. HTML injected into a page via JavaScript libraries such as mapping or ad serving providers could inadvertently affect the layout of your page at runtime. From the library designer's standpoint, they are injecting semantically neutral elements, but you've applied a style to such elements, thereby eliminating their neutrality.

  7. Avatar for Haacked
    Haacked June 15th, 2007

    @Craig - Are you referring to the PageAdapter property? I looked into it and that could be a blog post in and of itself. Long story short, it wouldn't be easy because alot of the handling for this sort of thing happens in internal methods. So you'd have to rewrite all of page rendering just to handle this one little thing.
    @Ben - Whether we agree with Scott or not is beside the point. I'm not being prescriptive here. I'm being descriptive. It's a common practice I've seen in the wild, for example, when downloading free CSS templates.

  8. Avatar for Mads Kristensen
    Mads Kristensen June 16th, 2007

    I can't see why this is a problem. In ASP.NET 1.x I always used a custom form control that added the div tag for XHTML conformance. It has never been an issue to be able to identify that particular div by a class name for one very simple reason: there is no need to reference all divs on a page or within a form from CSS. If you want to do it anyway, you can do it like so:
    This will reference the auto-generated div in CSS:
    form div {background:blue}
    and this will reference the divs you inserted inside the form to create you page
    form div div {background:white}

  9. Avatar for Damien Guard
    Damien Guard June 16th, 2007

    The DIV isn't half as annoying as the forced INamingContainer (MasterPage) mangling of ID's which not only screws up the CSS but also any forms processors you don't have control of and any JavaScript you weren't intending to modify.
    [)amien

  10. Avatar for Ben Rogers
    Ben Rogers June 17th, 2007

    Descriptive huh? Doesn't read that way to me. Phrases like "could have been implemented in a better manner" are loaded. In my first reading, I thought you were arguing in favor of such practices and assigning blame to ASP.Net. I just reread your post again and came away with the same impression. If you're simply trying to provide a work around, then that is not clear to me from what you've written here.

  11. Avatar for Haacked
    Haacked June 17th, 2007

    @Ben - I don't understand your point.
    I linked to a post where someone wanted to remove the DIV around the hidden inputs. I also linked to a comment in ScottGu's blog where someone mentioned a problem with the generated DIV creating a gap.
    I didn't tell (aka Prescribe) these people to use CSS to apply a style to all DIVs. I am describing the fact people are doing so, and thus running into problems.
    My post, is meant to be both a workaround to the problem that these people have encountered as well as a minor critique of ASP.NET. If ASP.NET injects markup into your page, it ought to identify it somehow or make sure it is not going to have a visible effect (as in hidden inputs).
    I feel my workaround is a better solution than trying to hack around with PageAdapter or Response.Filter.

  12. Avatar for Member Blogs
    Member Blogs June 17th, 2007

    .NET Another way to generate XML in PowerShell CLR Add-In model in .NET 3.5 Interfaces vs Abstract Classes

  13. Avatar for Ben Rogers
    Ben Rogers June 18th, 2007

    My point is that your intent did not match your language. You intended to describe an issue, but because of the loaded language, I misinterpreted. Perhaps I'm just being pedantic.
    In any case, we disagree on at least one detail. I think that libraries and IDEs should be free to inject semantically neutral tags (div and span). I do not fault ASP.Net for this.

  14. Avatar for Haacked
    Haacked June 18th, 2007

    @Ben - Why should the semantically neutrality of the DIV allow it to be injected willy nilly? Is being Semantically Neutral enough?
    Section 7.5.4 of the W3C Recommendation defines DIV content to be block-level.
    Isn't it reasonable to say this imparts a bit of semantics to the DIV. In other words, if the DIV were truly semantically neutral, would it not be interchangeable with the SPAN? It is not, which hints that there is some semantic meaning to each element.
    The spec also points out that there is a common visual representation for the DIV.

    Visual user agents generally place a line break before and after DIV elements, for instance:


    So while the semantics of the DIV may remain neutral in the sense of how it describes my content, by default, it does affect the layout of my content.
    So you almost had me convinced to retract that point, but I'm going to stick by it for now unless you blow my argument out of the water. ;)

  15. Avatar for Steev
    Steev July 1st, 2007

    Phil,
    I've never really run into this problem, as I'd rather specifically include elements in my CSS rules than put in a generic rule and have to exclude many special cases - especially when it comes to such commonly and diversly used elements as divs.
    In response to your comments about moving ViewState to the bottom of the page, I've posted an updated Regex on my blog which moves the div as well as the ViewState tag, works quite well for me so far.

  16. Avatar for opello
    opello July 2nd, 2007

    I'm reading a backlog of aggregated posts, and Mads hit the thought I was thinking while reading the bit about having to use child selectors or first-child pseudo classes. Just using form div { padding: 0; } or whatever styles you would need to correct should indeed fix the 'problem.'

  17. Avatar for Scott Taylor
    Scott Taylor November 4th, 2007

    Most of the generated code is awful. The <div> should actually be a <fieldset> wrapping the inside of the entire form. that would be semantically correct. They reason they use DIVs is to get the page to validate. That is a hacky approach. It doesn't need to be wrapped in any block level element. It needs to be wrapped with a fieldset tag. Fieldset tags can easily be styled, but they contain a border by default. that is probably why they weren't used.

  18. Avatar for John Hancock
    John Hancock November 14th, 2007

    @Ben Rogers
    I cannot personally see how the <div> tag can be semantically neutral. Although I see the argument, (X)HTML is a language and thus all tags carry inherent and semantic meaning. It's all a question of semantics I guess. I don't agree that an INPUT tag which is hidden needs to be put in a div for it to be semantically valid, it is of course hidden from the user and thus can be anywhere on the page as far as the user is concerned. While there are limited/no operational semantics involved in the use of a <div> tag, from a linguistic point of view a <div> tag defines a division or section of the page, and the <body> tag can be viewed as a <div> tag loaded with semantics. That the <input> is in the <body> should be therefore be enough for us, in my opinion.
    I admit that it is a bit retentive to look at it that way, but if you have no hidden inputs, from many presentational perspectives the <div> becomes empty, and as the <div> cannot be type=hidden the same way the same way the inputs are. So, I can see why it was put in. But it would be nice to have the option to leave it out.

  19. Avatar for Jonas Hovgard
    Jonas Hovgard December 1st, 2007

    First, sorry for my bad english, I usally write in Danish :)
    I was also hitted by this bug, under my developing of a page with div's that got 100% heights.
    The .NET Form DIV really messed my setup totally up!
    This is my fix:
    Instead of just having the <form id="form1" runat="server"> I wrote this:
    <div id="dotnetHide"><form id="form1" runat="server"></div>
    In my CSS file I did this:
    div#dotnetHide div
    {
    visibility: hidden;
    }
    This gives me totally control over the Form DIV (And only the ASP.NET Form DIV).
    Hope it's useful :)
    Regards..

  20. Avatar for Alexander
    Alexander January 23rd, 2008

    You may put js function into body onload: it will scan html for div, containing asp hidden fields and set style.display = 'none' for them :)
    So all your elements will be aligned after page loading...
    Cumbersome! hahaha

  21. Avatar for John
    John February 24th, 2008

    Got a question about form tag and css layout for div ...whenever I place a form tag in my aspx page the tag takes the upper half page of my aspx page and I cannot place center div properly from top of the page that div only appears where the form tag ends in the page so bacically the top half page is empty white space in the center... any solution to this??

  22. Avatar for Ahmed-Haadi Sh.Ali
    Ahmed-Haadi Sh.Ali June 11th, 2008

    My point is that your intent did not match your language. You intended to describe an issue, but because of the loaded language, I misinterpreted. Perhaps I'm just being pedantic.
    In any case, we disagree on at least one detail. I think that libraries and IDEs should be free to inject semantically neutral tags (div and span). I do not fault ASP.Net for this.

  23. Avatar for Jared
    Jared February 26th, 2010

    Another fix could be to slap this jquery line on your page:
    $("#__VIEWSTATE").parent().addClass("asp-generated");

  24. Avatar for manish mittal
    manish mittal May 24th, 2010

    how to handle the div tag around asp.net hidden inputs in a website

  25. Avatar for Deepa
    Deepa June 28th, 2011

    can any one help me, how to add padding-left, padding-right in a single line

  26. Avatar for Graham
    Graham June 7th, 2012

    Great post - helped me a lot.
    I agree with comments that styling all divs is bad practice - but in my work I get the designs from a designer, and this is much easier than having to go back to him to rewrite all his styles.

  27. Avatar for benny
    benny September 2nd, 2013

    get your ASP guy to add runat=server to the HEAD tag - viewstate gets dropped in there, not on the page