Standerdize sizing of .btn-group and .input-group #9295

Closed
Yahasana opened this Issue Aug 9, 2013 · 9 comments

Comments

Projects
None yet
4 participants
@Yahasana

Yahasana commented Aug 9, 2013

current implement

<div class="btn-group">    <!-- add btn-sm for every buttons -->
    <button type="button" class="btn btn-default btn-sm">Left</button>
    <button type="button" class="btn btn-default btn-sm">Middle</button>
    <button type="button" class="btn btn-default btn-sm">Right</button>
</div>
<div class="input-group">    <!-- add input-sm for every inputs -->
  <input type="text" class="form-control input-sm">
  <span class="input-group-addon input-sm">.00</span>
</div>

vs

<div class="btn-group btn-sm">  <!-- only one btn-sm required -->
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
<div class="input-group input-sm">  <!-- only one input-sm required -->
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

ref #9056

@mdo mdo closed this in a78c8d9 Aug 12, 2013

@Yahasana

This comment has been minimized.

Show comment
Hide comment
@Yahasana

Yahasana Aug 13, 2013

missing .input-group-lg > .input-group-btn > .btn and .input-group-sm > .input-group-btn > .btn

missing .input-group-lg > .input-group-btn > .btn and .input-group-sm > .input-group-btn > .btn

@knownasilya

This comment has been minimized.

Show comment
Hide comment
@knownasilya

knownasilya Aug 14, 2013

Contributor

.input-group-lg keeps the .btn at the original size (does not make it bigger along with the text input), removing .input-group-lg > .input-group-btn > .btn fixes the issue..

Contributor

knownasilya commented Aug 14, 2013

.input-group-lg keeps the .btn at the original size (does not make it bigger along with the text input), removing .input-group-lg > .input-group-btn > .btn fixes the issue..

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 14, 2013

Member

@knownasilya And that's exactly the fix that mdo has applied.

Member

cvrebert commented Aug 14, 2013

@knownasilya And that's exactly the fix that mdo has applied.

@knownasilya

This comment has been minimized.

Show comment
Hide comment
@knownasilya

knownasilya Aug 14, 2013

Contributor

@cvrebert After the rc.2 release?

Contributor

knownasilya commented Aug 14, 2013

@cvrebert After the rc.2 release?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 14, 2013

Member

No, for RC2. The commit he made above after I reopened the issue: 4957670

Member

cvrebert commented Aug 14, 2013

No, for RC2. The commit he made above after I reopened the issue: 4957670

@knownasilya

This comment has been minimized.

Show comment
Hide comment
@knownasilya

knownasilya Aug 14, 2013

Contributor

@cvrebert He added .input-group-lg > .input-group-btn > .btn which is exactly what keeps the .btn at it's original size..

Here's a jsbin reproducing the issue.

Contributor

knownasilya commented Aug 14, 2013

@cvrebert He added .input-group-lg > .input-group-btn > .btn which is exactly what keeps the .btn at it's original size..

Here's a jsbin reproducing the issue.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 14, 2013

Member

Ah, sorry, misread.

Member

cvrebert commented Aug 14, 2013

Ah, sorry, misread.

@cvrebert cvrebert reopened this Aug 14, 2013

@Yahasana

This comment has been minimized.

Show comment
Hide comment
@Yahasana

Yahasana Aug 15, 2013

.input-group-lg > .input-group-btn > .btn was added to sm group.
and missing .input-group-sm > .input-group-btn > .btn

that is the issue

.input-group-lg > .input-group-btn > .btn was added to sm group.
and missing .input-group-sm > .input-group-btn > .btn

that is the issue

@cvrebert cvrebert closed this in 3a67054 Aug 15, 2013

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 15, 2013

Member

@Yahasana Thank you for the straightforward explanation.

Member

cvrebert commented Aug 15, 2013

@Yahasana Thank you for the straightforward explanation.

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

(less) Newfangled input and button group sizing (fixes #9295)
Instead of applying `.btn-` or `.input-` to individual elements in
button and input groups, we now have new sizing classes to keep your
markup a little leaner.

* Add `.input-group-sm` or `.input-group-lg` to your `.input-group` to
replicate `.input-sm` and `.input-lg`, respectively.
* Add `.btn-group-xs`, `.btn-group-sm`, or `.btn-group-lg` to your
`.btn-group` to replicate `.btn-xs`, `.btn-sm`, and `. btn-lg`,
respectively.

Both sets of new sizing classes simply use the existing individual
sizing classes as mixins, so customization of them is automatically
inherited when compiling.

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

(less) Newfangled input and button group sizing (fixes #9295)
Instead of applying `.btn-` or `.input-` to individual elements in
button and input groups, we now have new sizing classes to keep your
markup a little leaner.

* Add `.input-group-sm` or `.input-group-lg` to your `.input-group` to
replicate `.input-sm` and `.input-lg`, respectively.
* Add `.btn-group-xs`, `.btn-group-sm`, or `.btn-group-lg` to your
`.btn-group` to replicate `.btn-xs`, `.btn-sm`, and `. btn-lg`,
respectively.

Both sets of new sizing classes simply use the existing individual
sizing classes as mixins, so customization of them is automatically
inherited when compiling.

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

emilymerwin referenced this issue in emilymerwin/gga Dec 12, 2014

Upgrade to Bootstrap 3.3.1
And delete two versions of Bootstrap that aren't actually being referenced anywhere
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment