Solved

textbox all on one line. mvc5 twitter bootstrap

Posted on 2014-03-28
5
1,732 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
This video Micro Tutorial shows how to password-protect PDF files with free software. Many software products can do this, such as Adobe Acrobat (but not Adobe Reader), Nuance PaperPort, and Nuance Power PDF, but they are not free products. This vide…
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…

728 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