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.

setting a width works on your fiddle http://jsfiddle.net/MeycD/446/ — Kevin Lynch, Jul 20 '14 at 08:16
@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, Jul 20 '14 at 08:22

score 0 · Answer 1 · answered Jul 20 '14 at 08:44

0

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

answered Jul 20 '14 at 08:44

mxpln

91
2

score 0 · Answer 2 · answered Jun 15 '16 at 11:21

0

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

answered Jun 15 '16 at 11:21

Srijay

109
1
6

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

2 Answers2