GC Usability theme - margins - forms and dotNet about wet-boew

[sylus]

I checked this out and see the margins are lost when form element is added right after the body tag. While I can't speak with 100% accuracy I believe this was intentional as for regular forms you don't want to dictate certain styles. The margins I believe you are referring to are the gutters for the existing grid system. Could you add your opinion @pjackson28? I could be wrong.

I can't say I like the idea of having a form element just added to the body and wrapping the entire content though. It is my hope that we can keep pushing the idea of clean semantic markup. Does this form element persist when logged out or just for the admin interface?

[agagnon]

I agree with you @sylus, but with dotNet, you can't do otherwise, this is how dotNet works, it automatically wraps the document in a form. So this means that with a dotNet web site, we'd have to patch everything to make it look nice, this is definitely not what we have in mind.

Still, I don't really understand why forms have margins and headings and p elements inside forms don't.

[LaurentGoderre]

Having a form around the whole body is one of the most bizarre thing from Microsoft. However it is simple to fix by creating a class that inherits the Page class and override the render method to not include the form. Frankly, the Page class should be way more generic.

[agagnon]

Although I agree with you that it is a weird thing from Microsoft, as far as I know, a dotNet page needs to have a form... Anyway, this will make the search feature in the header of the page to not work at all if there is no form. And even if you could wrap only the search feature in a form, if the page content is a form to register for an event or anything like that, you can't have 2 forms in a dotNet page. This is a major issue for a Web Application.

But again, wouldn't it be easier if forms did not have margins and if headings and p elements inside forms just behave the same way they do in div? Fieldsets would have margins and so would headings and p.

[LaurentGoderre]

I understand you might be hesitant to do this but I have done it before and it works great. Plus having two form on a page is not a problem and is in fact desirable when they perform different actions (i.e. a search form and a login form). Forms can be created using .NET controls.

[agagnon]

That's good to know. I've never experienced with multiple forms in a dotNet webpage but I will look into it.

But then again, wouldn't it be desirable to have all headings, paragraphs and other elements to behave the same way, whether they are in a form or not?

The reason

has margin-left:10px and margin-right:10px is is mimic a grid cell. If the form was in a grid cell, then the gutter has been created but the form wasn't, it would fill the width of the entire space, which is 20px wide. So basic elements (p, ul, ol, form, table etc), all have a 10px margin left/right when not in a grid and then a 0px when inside a grid. Also, form elements are being redone based blend on Twitter's bootstrap and formalize.me . Mark from RCMP is currently converting it to SCSS. This is a preview (prior to conversion to SCSS with some extra clutter in there so just scroll down and look at the form part). : http://wet.pre.pub.rcmp-grc.gc.ca/theme-rcmp-grc-pub-gcwu-fegc/style-guide-main.htm

[agagnon]

I'm glad you posted that link : http://wet.pre.pub.rcmp-grc.gc.ca/theme-rcmp-grc-pub-gcwu-fegc/style-guide-main.htm

Scroll down to "module-versatile" section. The fourth box with the form inside is a problem. Just set the "select" element width to 100% and you'll see a 20 pixels overflow, which means that module-form-fluid forms can't fit easily inside a box like this one.

Forms have been redone to this: http://wet-boew.github.com/wet-boew/demos/grids/grid-form-eng.html based on Twitter bootstrap and also formalize.me

Forms can now accommodate grids inside them so I think everything should be OK

[pjackson28]

Closing since issue addressed with recent Grids update.