Menu icon Foundation
Row collapse on small in a form

I'm trying to use the conditional 'collapse' classes inside a form, such that an input text and submit button combo are collapsed and postfix only on small screens but it's not rendering as I'd like it to. I also don't think it's rendering correctly when there are nested rows.

Here's three examples on Codepen to illustrate various states:

http://codepen.io/wallacio/pen/adJrvP

When not inside a form (1), the rendering of the input field and submit button on small screens has no outer gutter, yet it does when inside form tags.

However when the combo is inside a form tag (2), the elements are not collapsed (but the outer gutter is correct).

I want it to behave as (3), but only for small. Medium up, no collapse (as 2 looks on medium-up screens) without too much hackery!

Thanks folks
Andy

collapseform5.5.3

I'm trying to use the conditional 'collapse' classes inside a form, such that an input text and submit button combo are collapsed and postfix only on small screens but it's not rendering as I'd like it to. I also don't think it's rendering correctly when there are nested rows.

Here's three examples on Codepen to illustrate various states:

http://codepen.io/wallacio/pen/adJrvP

When not inside a form (1), the rendering of the input field and submit button on small screens has no outer gutter, yet it does when inside form tags.

However when the combo is inside a form tag (2), the elements are not collapsed (but the outer gutter is correct).

I want it to behave as (3), but only for small. Medium up, no collapse (as 2 looks on medium-up screens) without too much hackery!

Thanks folks
Andy

Rafi Benkual over 3 years ago

If I understand correctly, you would like a separate collapse control for forms than the columns not in a form? Like example 1, if you had padding on the columns containing the input fields, but the input fields have no padding between on small.

Do think it would warrant adding the extra code into the framework to separate these two use cases? Would it cause more confusion than it' s worth?

With CSS I added padding the box containing the form to solve it: http://codepen.io/rafibomb/pen/JGNoxm

Andy Wallace over 3 years ago

Hi Rafi,

I think I've over-complicated my explanation!

If you use my Codepen:

On larger (medium-up, say) screens I want the input/submit field to look as in example 2.

On small screens, I want it to look as in example 3.

The markup for example 2 is how I think it should work, but this doesn't close up the gap between the fields on small as I'd expect (that's the only thing - the gutters etc. are perfect).

From what I can work out, small-collapse doesn't work when used inside a form (use Firebug to change small-collapse to collapse, and it displays perfectly on small).

Andy

Rafi Benkual over 3 years ago

Hi Andy,
Looking at the codepen I added (version 1), isn't that what is happening or am I missing something?

Forms use grids to size.
I think the question here is, should collapse work different on forms than the grid itself? How would that even be done? Using a .form-collapse class?

Andy Wallace over 3 years ago

Hi Rafi,

Very nearly, the only flaw being that on small, the gutters are different, because you've got additional padding on your row.

https://www.dropbox.com/s/qfqkim4v307u3et/form-collapse.png?dl=0

I think that in my scenario, collapse would have to work slightly differently in that padding/margins are only removed internally.

I'll have a play around when I have more time and if I find a sensible solution, I'll let you now. It's probably not complicated, I just wondered if I was missing something obvious.

Andy