Solved

textbox all on one line. mvc5 twitter bootstrap

Posted on 2014-03-28
5
1,678 Views
Last Modified: 2014-03-28
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

0
Comment
Question by:NickMalloy
  • 2
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 39961796
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
 

Author Comment

by:NickMalloy
ID: 39961804
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
 
LVL 52

Accepted Solution

by:
Carl Tawn earned 300 total points
ID: 39961821
Can you post the styles associated with the various CSS classes you have in there too?
0
 

Author Comment

by:NickMalloy
ID: 39961913
i changed the form-control style from display block to inline. This was in the bootstrap styles.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39961918
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays,…
In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now