ducquyfcsmith
New Member
Thanks to James Donnelly, this has been solved. My example has been updated to the working solution.My reputation isn't high enough so I can't post an image, so I am going to try and describe it as best as possible. I have 7 textboxes and a textarea on a form, and when I load the page, it currently loads each textbox on a separate line.However, I want the textboxes to load like this:
1 2 3
4 5 6 7
---8--- (span across)Should I put each row inside a div? I tried floating each textbox to the left, but that does not work correctly. I have Twitter bootstrap setup in my project if that makes things easier. Here is my working code:\[code\]<div class="well"><h4>Enter Movie in System:</h4>@using (Html.BeginForm()) { <div> <div class="input-prepend"> <span class="add-on"><i class="icon-film"></i></span> @Html.TextBoxFor(m => m.Title, new { placeholder = "Title" }) @Html.ValidationMessageFor(m => m.Title) </div> <div class="input-prepend"> <span class="add-on"><i class="icon-facetime-video"></i></span> @Html.TextBoxFor(m => m.Director, new { placeholder = "Director" }) @Html.ValidationMessageFor(m => m.Director) </div> @* Make dropdown *@ <div class="input-prepend"> <span class="add-on"><i class="icon-tags"></i></span> @Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" }) @Html.ValidationMessageFor(m => m.parentGenre) </div> <div class="input-prepend"> <span class="add-on"><i class="icon-star-empty"></i></span> @Html.TextBoxFor(m => m.Stars, new { placeholder = "Actor" }) @Html.ValidationMessageFor(m => m.Stars) </div> <div class="input-prepend"> <span class="add-on"><i class="icon-time"></i></span> @Html.TextBoxFor(m => m.Duration, new { placeholder = "Duration (mins)" }) @Html.ValidationMessageFor(m => m.Duration) </div> @* Make dropdown *@ <div class="input-prepend"> <span class="add-on"><i class="icon-warning-sign"></i></span> @Html.TextBoxFor(m => m.Rating, new { placeholder = "Rating" }) @Html.ValidationMessageFor(m => m.Rating) </div> <div class="input-prepend"> <span class="add-on"><i class="icon-calendar"></i></span> @Html.TextBoxFor(m => m.releaseDate, new { placeholder = "Release Date" }) @Html.ValidationMessageFor(m => m.releaseDate) </div> <div class="control-group"> <div class="input-prepend"> <span class="add-on"><i class="icon-comment"></i></span> @Html.TextAreaFor(m => m.Description, new { placeholder = "Description", @class="input-xxlarge" }) @Html.ValidationMessageFor(m => m.Description) </div> </div> <p> <button class="btn" type="submit" value="http://stackoverflow.com/questions/15466443/Register">Register</button> </p> @Html.ValidationSummary() </div>}\[/code\]
1 2 3
4 5 6 7
---8--- (span across)Should I put each row inside a div? I tried floating each textbox to the left, but that does not work correctly. I have Twitter bootstrap setup in my project if that makes things easier. Here is my working code:\[code\]<div class="well"><h4>Enter Movie in System:</h4>@using (Html.BeginForm()) { <div> <div class="input-prepend"> <span class="add-on"><i class="icon-film"></i></span> @Html.TextBoxFor(m => m.Title, new { placeholder = "Title" }) @Html.ValidationMessageFor(m => m.Title) </div> <div class="input-prepend"> <span class="add-on"><i class="icon-facetime-video"></i></span> @Html.TextBoxFor(m => m.Director, new { placeholder = "Director" }) @Html.ValidationMessageFor(m => m.Director) </div> @* Make dropdown *@ <div class="input-prepend"> <span class="add-on"><i class="icon-tags"></i></span> @Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" }) @Html.ValidationMessageFor(m => m.parentGenre) </div> <div class="input-prepend"> <span class="add-on"><i class="icon-star-empty"></i></span> @Html.TextBoxFor(m => m.Stars, new { placeholder = "Actor" }) @Html.ValidationMessageFor(m => m.Stars) </div> <div class="input-prepend"> <span class="add-on"><i class="icon-time"></i></span> @Html.TextBoxFor(m => m.Duration, new { placeholder = "Duration (mins)" }) @Html.ValidationMessageFor(m => m.Duration) </div> @* Make dropdown *@ <div class="input-prepend"> <span class="add-on"><i class="icon-warning-sign"></i></span> @Html.TextBoxFor(m => m.Rating, new { placeholder = "Rating" }) @Html.ValidationMessageFor(m => m.Rating) </div> <div class="input-prepend"> <span class="add-on"><i class="icon-calendar"></i></span> @Html.TextBoxFor(m => m.releaseDate, new { placeholder = "Release Date" }) @Html.ValidationMessageFor(m => m.releaseDate) </div> <div class="control-group"> <div class="input-prepend"> <span class="add-on"><i class="icon-comment"></i></span> @Html.TextAreaFor(m => m.Description, new { placeholder = "Description", @class="input-xxlarge" }) @Html.ValidationMessageFor(m => m.Description) </div> </div> <p> <button class="btn" type="submit" value="http://stackoverflow.com/questions/15466443/Register">Register</button> </p> @Html.ValidationSummary() </div>}\[/code\]