CODEWITHSUNDEEP
twitter-bootstrapcssflexboxtwitter-bootstrap-4
AnApprentice
AnApprentice

Reputation: 111040

How to get Flexbox to allow an input to be 100% width?

I have the following flexbox form powered by bootstrap 4.

https://jsfiddle.net/kkt0k2bs/1/

I have a media query to resize the form elements for smaller display.

On larger displays, I want the form items to be inline, but on smaller screens, I want the form elements to be stacked and at 100%.

The input is not going 100% width on smaller displays... How can I enable the code to get the width to 100% on smaller displays?

HTML:

<div class="form-mod">
        <form class="form-inline justify-content-center d-inline-flex">
            <div class="form-group">
                <div>
                    <input type="text" name="email" value="" placeholder="Enter your email..." class="form-control">
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Request an Invite</button>
            </div>
        </form>
</div>

CSS:

.form-mod {
  display: inline-block;
  text-align: center;
  padding: 16px 32px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3;
  box-shadow: 0 20px 63px 0 rgba(0,0,0,.6);

  [type="text"] {
    width: 260px;
    margin-right: 16px;
    border-radius: 100px;
    padding-left: 18px;
    border-radius: $border-radius;
    font-size: 16px;
  }

  @include media-breakpoint-down(sm) {
    .form-group {
      width: 100%;
    }
    [type="text"] {
      width: 100%;
      margin: 0 0 16px 0;
      display: block;
    }
    opacity: .5;
  }
}

Upvotes: 5

Views: 9017

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371799

Add this to your code:

.form-group {
  flex: 1 0 auto;
}

revised demo

This tells flex items to share space when on the same line.

But when they break onto separate lines, each will consume all available space.

Upvotes: 7

katniss.everbean
katniss.everbean

Reputation: 550

I think your .form-mod { display: inline-block; } might be at fault. You could write a media query for smaller screens to change this to block.

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { 
  .form-mod {
    display: block;
  }
}

Upvotes: 0

Related Questions