[Form] Add unstackable form/fields

[christarnowski]

The default behavior for form fields is to stack (width: 100% on smaller screens). This is a bit frustrating when one wants to preserve the layout of the form and for fields to adjust to smaller screen size. Right now the only solution, as far as I know, is to re-define Semantic UI classes.

The Grid collection got this one right: by default, it does not stack columns. Instead, you have to use stackable class to enforce such behavior. It would be awesome to use the same "API" for Forms.

For example, the code below will preserve the layout, i.e. First Name and Last Name will render in the same row on both desktop and mobile:

<form class="ui form">
  <div class="two fields">
     <div class="field">
       <label>First Name</label>
       <input type="text" placeholder="Joe" />
     </div>
     <div class="field">
       <label>Last Name</label>
       <input type="text" placeholder="Doe" />
    </div>
  </div>
</form>

while with stackable, it will enforce current behavior present in Semantic UI (both fields in new rows):

<form class="ui stackable form">
  <div class="two fields">
     <div class="field">
       <label>First Name</label>
       <input type="text" placeholder="Joe" />
     </div>
     <div class="field">
       <label>Last Name</label>
       <input type="text" placeholder="Doe" />
    </div>
  </div>
</form>

The solution is very easy – just add use .ui.stackable.form instead of .ui.form in relevant @media definitions. I can prepare a patch/PR for that. Just let me know what you think (I might have missed something etc.).

[jlukic]

I think the better choice is to use an unstackable variation, like what is used in tables. But this makes sense

[christarnowski]

That's up to you guys. Either way works.

I see you marked this for 2.2. It's relatively simple and, at least in my opinion, very desirable feature. Any chances for it to ship with 2.1?

[jlukic]

No, 2.1 will be shipping tomorrow.

[christarnowski]

Ah, makes sense. Thanks!

[tristanjahier]

I'm really waiting for it too, thanks. 👍
Does anyone know an easy workaround right now?

[jlukic]

Just an update, 2.1 was delayed due to some personal issues. Will be coming next tuesday.

[christarnowski]

Thanks for the heads up, @jlukic. Hope all is well.

[hendricha]

@tristanjahier : Workaround idea is: you could manually add :not(.unstackable) to all selector lines after the "/* Swap to full width on mobile */" line in an uncompressed semantic css.

[adamcollingburn]

Was this added in the 2.2 release?

[voanhcuoc]

yeah, same question with him !

[marcdavi-es]

I don't think this has been included yet.

Would be an awesome addition :)

[jlukic]

I've added two new variations in 2.2.11 unstackable fields and unstackable form

Either of these will prevent the stacking behavior on their respective contents.