CODEWITHSUNDEEP
htmlcss
DrOverbuild
DrOverbuild

Reputation: 1265

Making the search field fit the width of its given space

I have a navigation bar similar to this, and my problem is I want the search field to stretch to the end of the .PageMenu container. I have tried to use 100% on these elements:

I've tried a few other things, but not really sure where to go from here.

All the code and stuff is in the CodePen Link: http://codepen.io/DrOverbuild/pen/PGyLpW/

Upvotes: 0

Views: 40

Answers (2)

pol
pol

Reputation: 2701

I suggest using flex-boxes. Then increase the elements inside to width: 100%
The relevant changes in the code would be:

#SearchForm {
  display: flex;
  flex: 1;
}
#SearchForm form {
  width: 100%;
}
#search_query {
  width: calc(100% - 22px); /* minus the width of the button */
}

Full version on codepen

Upvotes: 2

Jayce444
Jayce444

Reputation: 9063

The property 'width' inherits directly from the parent element, so if you want element that's low in the DOM hierarchy to be 100% of the page for example, you have to make sure that all its parents are, or make it independent of the DOM or something else. Here's a small sample of what I think you're wanting, a few links and a search bar beside them that stretches to fill the rest of the screen. Just save this in a html file and open it in the browser:

index.html

<div id="pageMenuContainer" style="width:100%;min-width:350px;">
  <a href="#">Contact us</a>
  <a href="#">Shipping</a>
  <a href="#">Potato</a>
  <div style="float:right;width:calc(100% - 200px)">
    <input type="text" placeholder="Search..." style="width:100%;"/>
  </div>
</div>

Upvotes: 0

Related Questions