CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
theamateurdataanalyst
theamateurdataanalyst

Reputation: 2834

Input doesn't remain in parent container using Bootstrap

What I am attempting to do is create a div container that contains a header and an input field. I have accomplished this, but for some reason I can't get the input to live inside of my parent container. Ideally I would love it to scale based on the size of its container. I want the header and the input to always be container within the container. So these two elements should always have a gray background behind them. I have a jsFiddle here. I'd appreciate any help with this. Thanks!

<div class="front-page-container-search">
    <h3>This is the text I will have in my bubble. Yet when I shrink my screen the input moves down. </h3>
    <form>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Find artist...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </div>
    </form>
  </div>



.front-page-container-search {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 100px;
    color: white;
    text-align: center;
    top: 100px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid black;
    border-radius: 18PX;
    padding: 15px;
}

Upvotes: 1

Views: 93

Answers (2)

santon
santon

Reputation: 1834

In this case all you need to do is remove the height and let the container take the default height of the contents. Specifying a fixed height does not provide you responsiveness and the contents are forced to occupy the limited height when the screen size is smaller or when resized. Letting the layout engine calculate the height for you based on the contents, ensures all the contents are rendered within the parent.

.front-page-container-search {
    position: absolute;
    left: 10%;
    right: 10%;
    color: white;
    text-align: center;
    top: 100px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid black;
    border-radius: 18PX;
    padding: 15px;
    
}
<div class="front-page-container-search">
    <h3>This is the text I will have in my bubble. Yet when I shrink my 
         screen the input moves down. </h3>
    <form>
      <div class="input-group myform">
        <input type="text" class="form-control" placeholder="Find artist...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <span class="glyphicon glyphicon-search">Search</span>
          </button>
        </span>
      </div>
    </form>
  </div>

Upvotes: 1

Kevin Ard
Kevin Ard

Reputation: 604

I updated your fiddle here.

My changes:

  1. Removed the forced height in the css for .front-page-container-search
  2. Added div.clearfix inside your styled container. (this may or may not be necessary.)

Upvotes: 1

Related Questions