asked on

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

Carl Tawn

I'd guess it's probably down to the markup being produced. Can you post a sample of the markup generated by your code?

NickMalloy

ASKER

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

ASKER CERTIFIED SOLUTION

Carl Tawn

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

NickMalloy

ASKER

i changed the form-control style from display block to inline. This was in the bootstrap styles.

Gary

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