Add option to control input width (that works)

[cyberwombat]

According to docs one would use .col-lg-x on the .form-group. While it does constrain the input field it also cause every subsequent element to float next to it so that is not a useable solution. Applying the .col-lg-x class to the input field themselves does not work. Currently the only workable solution is to use style="width:X" which is hardly wonderful. Please add a way to control input widths.

[cyberwombat]

Here's a fiddle (not sure what issue here as I can't even get the form-group to resize on fiddle). If one wanted this form layout but with smaller input field? http://jsfiddle.net/tX3ae/

[cvrebert]

http://jsfiddle.net/tX3ae/2/

[cyberwombat]

Still doesn't work. Now you've constrained the entire form to that size. http://jsfiddle.net/tX3ae/8/ - make the top 2 short and the rest long. If the top two are too short they wrap together next to one another.

[cvrebert]

(drinks more coffee)

[cyberwombat]

You need to add something such as this so we can control width. Even if the col-sm-x weren't overridden by the form-control it still causes the float.

.input-1  { width: percentage((1 / @grid-columns)); }
.input-2  { width: percentage((2 / @grid-columns)); }
.input-3  { width: percentage((3 / @grid-columns)); }
.input-4  { width: percentage((4 / @grid-columns)); }
.input-5  { width: percentage((5 / @grid-columns)); }
.input-6  { width: percentage((6 / @grid-columns)); }
.input-7  { width: percentage((7 / @grid-columns)); }
.input-8  { width: percentage((8 / @grid-columns)); }
.input-9  { width: percentage((9 / @grid-columns)); }
.input-10 { width: percentage((10/ @grid-columns)); }
.input-11 { width: percentage((11/ @grid-columns)); }
.input-12 { width: 100%; }

[cvrebert]

Honestly, I'd suggest using .form-horizontal for anything nontrivial.

[cvrebert]

Shazam!: http://jsfiddle.net/tdUtX/2/

[cyberwombat]

Yes but now look at all the extra markup. Isn't that a bit ridiculous? I think that having a form with name, email (short fields) followed by a full width subject/message is pretty trivial/common. Having to use a grid for something that doesn't require one just because someone wanted to remove input width control is a bit lame imo. I've added the above code to my own build but honestly would like to see some effort towards getting that in the codebase.

[cyberwombat]

Either that or rework things so that things like col-sm-x etc can work directly on inputs without float issues.

[huwcbjones]

Stick a form control in a col--???

<div class="form-group”>
  <div class="col-*-*">
    <input.…
  </div>
</div>

Many Thanks
Huw Jones

On 30 Aug 2013, at 23:39, Yashua [email protected] wrote:

Either that or rework things so that things like col-sm-x etc can work directly on inputs without float issues.

—
Reply to this email directly or view it on GitHub.

[cyberwombat]

Well yes you can - and that is what @cvrebert has in the fiddle. I can certainly see the use of rows/grid for complex form layouts (i.e. a mix of horizontal and stacked fields) but to pretty much always have to use a grid is not wonderful by any means. And I think the contact form scenario I illustrated is a very common one. Frankly I don't understand why it's a big deal to have width control on inputs.

[mdo]

This is how we're doing it now, @cyberwombat. It's more verbose for sure, but it was a trade off we made with the percentages and the new grid system. For now, use the grid classes as @cvrebert has mentioned. In the future we can explore resets for form controls (we do have them for tables, but those are a slightly different story).

We'll need to see how that impacts building out forms with some examples, test out the behavior, see how it clashes with existing form groups/controls/layouts, and more. Folks will inevitably want to mix and match, and that's another can of worms.

In time, but not yet. I'll make a note to revisit this for 3.1 (no time table on that yet) in our planning issue, #9397.

[cyberwombat]

Thanks. Appreciate having that on the planning list.

[geocine]

I was just looking for this today. Glad this is on the planned list.

[akrabat]

The problem with @cvrebert's fiddle is that it doesn't cover the case where the label is longer than the input field and horizontal doesn't make sense when most fields require 100% elements.

[cvrebert]

@akrabat In my 2nd fiddle (I assume you're not referring to the broken first one), if the label is longer than the input field, then it'll just wrap onto a new line like you'd normally expect.

[akrabat]

yes - which doesn't makes sense when there's all that room on the same line. It's the input field that needs to be short as it's only allowed up to 5 characters, not the label which is 25 characters. For now, I've put a width directly on the input :)

[cvrebert]

That form format was specifically designed to always keep the labels above the input fields, so it's not really fair to criticize it for doing that.
Anyway, to make labels & inputs side-by-side on larger screens but stacked on mobile, all it takes is using the grid system, just in a different way than that example. And/or, yeah, manually set a hard fixed width if your design requires that.

Locking this issue since it naturally concluded almost a year ago.