Semantic-ui: [Form] Add Equal Sized Field Variation

[dsignr]

Hi, I'm using the inline form styling as described in the docs and I am able to make something like this:

What I'd really like to do is something like this:

I tried using 'wide', etc. Still no luck. Any thoughts, or do I have to manually assign a width for the labels as of now? (That's not going to be very DRY, though)

Thanks!

[jlukic]

I could see this as a variation like equal height the bad news it probably has to be done with _gasp_ display: table;.

[dsignr]

Hi, thank you for the quick reply ^_^

However, I figured out I could get this done with the existing classes (though it adds some extra markup):

<form class='ui middle aligned grid'>
        <div class='row'>
          <div class='six wide column'>
            <label>Full Name:</label>
          </div>
          <div class='ten wide column'>
            <div class='ui fluid input'>
              <input type='text'>
            </div>
          </div>
        </div>
        <div class='row'>
          <div class='six wide column'>
            <label>E-mail:</label>
          </div>
          <div class='ten wide column'>
            <div class='ui fluid input'>
              <input type='email'>
            </div>
          </div>
        </div>
        <div class='row'>
          <div class='six wide column'>
            <label>Company:</label>
          </div>
          <div class='ten wide column'>
            <div class='ui fluid input'>
              <input type='email'>
            </div>
          </div>
        </div>
        <div class='row'>
          <div class='six wide column'>
            <label>Phone:</label>
          </div>
          <div class='ten wide column'>
            <div class='ui fluid input'>
              <input type='text'>
            </div>
          </div>
        </div>
        <div class='row'>
          <div class='ten wide column right floated'>
            <button class='ui labeled icon button orange fluid right column'>
              Sign up
              <i class='right arrow icon'></i>
            </button>
          </div>
        </div>
      </form>

Final output:

Cheers :)

Thank you for this amazing framework! Personally, I'm a foundation user who has upgraded to semantic UI and is never going to look back. Ever.

[jlukic]

Thanks!

[dsignr]

Should I close this issue? Though I very much would love to have this as a feature enhancement (like you've noted) so we can get something like this done with much less markup. And sorry I'm kind of a new user to Github, so I don't even know if it's proper etiquette to close the issue or not :)

[jlukic]

Thanks for asking, but no, its ok to leave this open. I don't think just using a grid is an adequate solution for all cases because it doesn't adjust for text length.

[dsignr]

Alright, thanks then :) :+1:

[dsignr]

Hey Jack! Any progress in this front? I bumped into this issue again :D

[kalebdf]

+1 on solving this without too much more markup

[jlukic]

I dont know of anyway to solve this, even with flexbox without using display: table-cell and additional markup. Will probably require a wrapper around the input as well since display: table-cell can't be used directly on ui input which need flex.

[salarmehr]

Any news regarding this issue?

[dsignr]

@salarmehr I'd recommend for now, you may need to manually set a width for those labels, because I realized if you ignore the elements involved (label, input) this is actually a grid design problem which is why the framework doesn't have straightforward solutions rather than using a grid itself.

[palashkaria]

@salarmehr I think using inline-flex and flex-basis should solve this. You'll have to provide a min-width to the label

[jlukic]

Can you jsfiddle what you mean @palashkaria

I haven't seen any reasonable way to do this with flex outside of manually specifying a value in px, which is content dependent.

[palashkaria]

@jlukic You are right about setting a value in px, but I'd prefer this over using grids as it requires no changes to the form markup.

Here's the fiddle

[dsignr]

@palashkaria well, that's pretty neat..atleast, much better than my grid implementation! 👍

[jlukic]

That pixel width is based on the text size of the labels, there's no way to set that on a framework level.

[palashkaria]

@jlukic
Again, I agree, but this will just help people [like me] who end up here looking for a site level solution.

At the framework/theme level, I also don't see any way other than table-cells

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[Severec]

`_**

1. **_`