textbox all on one line. mvc5 twitter bootstrap

I'm trying to have the textbox for a phone number to be all on one line. I have it parsed out to three textbox. Right now every object drops to a new row. What am I doing wrong?

 <div class="form-group">
            @Html.LabelFor(model => model.Phone1, new { @class = "control-label col-md-3" })
            <div class="col-md-6">
                (@Html.TextBoxFor(model => model.Phone1, new { @class = "form-control input-large", maxlength = "3", @placeholder = "", style = "width:50px;" })) @Html.TextBoxFor(model => model.Phone2, new { @class = "form-control input-large", maxlength = "3", @placeholder = "", style = "width:50px;" }) @Html.TextBoxFor(model => model.Phone3, new { @class = "form-control input-large", maxlength = "4", @placeholder = "", style = "width:70px;" })
                @Html.ValidationMessageFor(model => model.Phone1)
            </div>
        </div>

Open in new window

NickMalloySystems LeadAsked:
Who is Participating?
 
Carl TawnSystems and Integration DeveloperCommented:
Can you post the styles associated with the various CSS classes you have in there too?
0
 
Carl TawnSystems and Integration DeveloperCommented:
I'd guess it's probably down to the markup being produced. Can you post a sample of the markup generated by your code?
0
 
NickMalloySystems LeadAuthor Commented:
Here is the generated html

   <div class="form-group">
            <label class="control-label col-md-3" for="Phone1">Phone</label>
            <div class="col-md-6">
                (<input class="form-control input-large" data-val="true" data-val-required="Phone is required" id="Phone1" maxlength="3" name="Phone1" placeholder="" style="width:50px;" type="text" value="" />) <input class="form-control input-large" id="Phone2" maxlength="3" name="Phone2" placeholder="" style="width:50px;" type="text" value="" /> <input class="form-control input-large" id="Phone3" maxlength="4" name="Phone3" placeholder="" style="width:70px;" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="Phone1" data-valmsg-replace="true"></span>
            </div>
        </div>

Open in new window

0
 
NickMalloySystems LeadAuthor Commented:
i changed the form-control style from display block to inline. This was in the bootstrap styles.
0
 
GaryCommented:
http://jsfiddle.net/GaryC123/52VtD/4085/
   <div class="form-group">

            <div class="col-md-3">
                            <label class="control-label" for="Phone1">Phone</label>
                (<input class="form-control input-large" data-val="true" data-val-required="Phone is required" id="Phone1" maxlength="3" name="Phone1" placeholder="" style="width:50px;" type="text" value="" />)
                <input class="form-control input-large" id="Phone2" maxlength="3" name="Phone2" placeholder="" style="width:50px;" type="text" value="" /> 
                <input class="form-control input-large" id="Phone3" maxlength="4" name="Phone3" placeholder="" style="width:70px;" type="text" value="" />
          
                <span class="field-validation-valid" data-valmsg-for="Phone1" data-valmsg-replace="true"></span>
            
        </div>

Open in new window

.form-control {
    display:inline-block
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.