CODEWITHSUNDEEP
cssruby-on-rails-3twitter-bootstrap
Black Dynamite
Black Dynamite

Reputation: 4147

CSS Bootstrap: Auto resize input field and button

I have a a text type input field, and I have a button for "Search". I would like these 2 objects to be horizontally aligned; with the button being as big as it wants to be, and the input field taking up the rest of the space. I have been trying with CSS all day, but with no avail.

I am using RoR, and employing the Bootstrap library. I was wondering if there was anything out of the box that would make this work. I have also tried using flexboxes, but the input field seems to have a mind of its own. Below is the problematic code.

<div class="mini-layout fluid">
 <div class="mini-layout-body">
   <h2>Shows</h2>
 </div>
 <div class="mini-layout-sidebar">
   <div class="search_container">
      <input id="search_shows_text" type="text" class="search-query">
      <button id="search_shows_button" 
          type="submit" class="btn btn-primary">Search</button>
  </div>
 </div>
</div>

I've been able to get the search_container class to lay things out horizontally, but getting its children to resize appropriately has managed to escape me all day.

Any help is greatly appreciated.

EDIT Thanks to Krishnan and the SO community I got the solution working. Below is the code for anyone else.

HTML
Search

CSS

.search_container
{
  text-align:center;
  margin-top: 5px;
}

.text_area
{
  width: 55%; //Change as per your requirement
  display: inline-block;
  margin: auto;
}

.but_area
{
   width: 25%; //Change as per your requirement
   margin: auto;
}

Upvotes: 1

Views: 7278

Answers (1)

Amarnath Krishnan
Amarnath Krishnan

Reputation: 1263

By default bootstrap have width set to 206px for text area and 71px for submit button. So in order to make it accomodate your requirements you have to override those default properties. I would probably do something like this.

create a class text_area with custom property

.text_area
{
   width: 85%; //Change as per your requirement
}

create a class but_area with custom property

.but_area
{
   width: 10%; //Change as per your requirement
}

And would use it in input text area and button.

 <input id="search_shows_text" type="text" class="search-query text_area">
  <button id="search_shows_button" 
      type="submit" class="btn btn-primary but_area">Search</button>

It will make my text area to occupy 85% of the space and button to occupy 10% space in my window and remaining 5% of space is left free.

Upvotes: 1

Related Questions