Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Vijai Mani
Vijai Mani
2,819 Points
Posted by Vijai Mani
Vijai Mani
2,819 Points

Bootstrap - form-inline text box size

Hi - I am doing the chapter - Building modal windows and forms in prototyping with bootstrap.

Below is the code I am using for the building the form with in the modal. When I use the placeholder text as "Enter your mobile number" the size of the box is not big enough so the last 5 alphabets of the placeholder text is getting cut.

I tried to specify the size of the box using col-xs-4 but still the box size is not enough. What should I be doing?

=======================================================

<form class="form-inline" role="form">
              <div class="form-group">
                    <label for="MobilePhone" class="sr-only">Mobile</label>
                    <div class="col-xs-12">
                      <input type="tel" class="form-control" id="MobileNumber" placeholder="Mobile number">
                    </div>
              </div>

              <div class="form-group">
                    <select class="form-control">
                      <option>iOS</option>
                      <option>Android</option>
                    </select>
              </div>

              <div class="form-group">
                  <button type="submit" class="btn btn-primary" data-dismiss="modal">Send me the link</button>
              </div>
            </form>

3 Answers

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You would need to target the input element itself to change the size try this

input { width: 250px; }

then you can use a nice focuseffect like 

input:focus { width: 350px; }

click in the box and it will grow to make it even slicker add a transition to the the part like transition: width .6s ease;

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Adding in transition effect is a nice touch :+1:

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Thanks. Think for something so simple it looks tonnes better. Merry Christmas btw. James Barnett

Vijai Mani
Vijai Mani
2,819 Points
Vijai Mani
Vijai Mani
2,819 Points

Thanks Adam. That worked.

But when the input box grows the other 2 adjacent controls are not moving accordingly. So the controls are over one another. how can i fix this?

Also, instead of defining the input field width in css I tried using col-sm-10 to fix the width but it didnt work?

Also, tried using col-sm-offset-4 to move the controls horizontally. didnt work. How can I move the individual controls horizontally?

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Could you copy the code into a codepen so i can investigate please

Vijai Mani
Vijai Mani
2,819 Points
Vijai Mani
Vijai Mani
2,819 Points

Merry Christmas Adam, James and all the treehouse team!