Increasing form input width for a position absolute element in Bootstrap 3

Question

I'm trying to increase the width of an input element of a form group in Bootstrap 3. As per this answer I can control the width by applying the col property to the div containing the input element.

The form has position absolute and I think that's what's stopping it from changing the width. Removing the position absolute allows me to increase the width. How can I increase the width of the element?

Here is my code

<form id="search_bar" class="navbar-form navbar-left">
    <div class="form-group col-md-6" id="dj-search">
        <input type="text" class="form-control typeahead" placeholder="Search favourite DJs" autocomplete="off">
    </div>
</form>

Here is a JSFiddle for the same.

Answer 1

Set the width of your two .form-control class to the value you want.

Answer 2

You probably should add 'left' with 'right'. Like this. Adjust width with left and right.

#search_bar {
  position: absolute;
  right: 40px;
  left:40px;
}

Here is your fiddle with changes made