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

0
votes

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.

2
htmlcsstwitter-bootstraptwitter-bootstrap-3
setting a width works on your fiddle jsfiddle.net/MeycD/446 – Kevin Lynch
@Vector That's weird. If I try the same thing in my project, it just moves the entire div to the right with that width but the input element width remains the same. – Yin Yang
If you post a link i could have a quick look – Kevin Lynch

2 Answers

0
votes

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

0
votes

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