Asp.Net MVC 5 + Bootstrap. How make inputs fit screen width? - css

I really don't know what I'm doing wrong. I want my textboxes with same size of my buttons below. I already tried change a lot in the cshtml but without success.
Below my cshtml file:
#model SomeModel.Models.LoginViewModel
<div class="row">
<div class="col-md-8 col-sm-12 col-xs-12">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(m => m.UserName, new { #class = "col-md-2 control-label" })
<div class="col-md-12">
#Html.TextBoxFor(m => m.UserName, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.UserName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-12">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Password)
</div>
</div>
<div class="form-group">
<div class="col-sm-12 col-xs-12">
<button type="submit" class="btn btn-success btn-block">Entrar</button>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
<button type="submit" class="btn btn-primary btn-block">Ainda Não Tenho Conta</button>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
<button type="submit" class="btn btn-info btn-block">Esqueci Meu Usuário Ou Senha</button>
</div>
</div>
<p>
#Html.ActionLink("Register", "Register") if you don't have a local account.
</p>
}
</section>
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
What am I doing wrong?

The default MVC5 template has a css rule in Site.css:
input, select, textarea { max-width: 280px; }
I usually remove this rule.
It causes problems with Bootstrap v3 input group where the input box does not extend to its container's width.

Related

How to move this Bootstrap login form to center of viewport

How can I set the login view to center of screen? No matter what I try it gets messy. I'm new to Bootstrap and coding.
I've tried align items center and justify but they don't seem to work.
<h2 style="padding-top: 50px">Welcome to Portal.</h2>
<hr/>
<h4 style="padding-top: 20px">Please log in to continue.</h4>
<div class="row justify-content-center" style="padding-top: 30px">
<div class="col-6">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Log in" class="btn btn-primary" />
</div>
</div>
<p>
#Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>
}
</section>
</div>
</div>
Desired output:
My output:
Try adding d-flex to your row so that the justify content center works.
Wrap your login div with a container with max-width. That will solve your problem.
This will make sure the container is position centered.
I have removed the justify-content-center and extra col-6 that you had put for the login section and wrapped it with a container with max-width.
<h2 class="mt-3">Welcome to Portal.</h2>
<hr/>
<div class="container mt-5" style="max-width:400px">
<h4 class="mt-2">Please log in to continue.</h4>
<div class="row">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Log in" class="btn btn-primary" />
</div>
</div>
<p>
#Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>
}
</section>
</div>
</div>
To center the content from top and bottom add align-items-center to row , and And pay attention plz , you must give height to row
and for left and right use width : max-content , margin : 0 auto
see this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>asdasd</title>
<link rel="stylesheet" href="css/general/bootstrap.css">
<style>
.row{
height: 100vh;
}
.main_field{
width: max-content;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row align-items-center">
<div class="main_field">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>

ASP:NET web api problem with dropdown menu

I'm making Hotel management web app, and working on part where i need to add rooms ,problem is with dropdown menu, while adding knew code , I don't know why my dropdown menu stopped working ,it wokrked perfectly before but when added another part of code, dropdown just stoped wokring(when i click on it it wont drop), i removed code that i added before but a dropdown menu still doesent work.I added the part with the dropdown menu below
**index.cshtlm**
#model HotelManagement.ViewModel.RoomViewModel
{
ViewBag.Title = "Index";
}
<pre>
<div id="divAddRoom" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Room</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="form-group ">
</pre>
#Html.LabelFor(model => model.RoomNumber)
#Html.TextBoxFor(model => model.RoomNumber, new { #class = "form-control", id = "txtRoomNumber" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.RoomPrice)
#Html.TextBoxFor(model => model.RoomPrice, new { #class = "form-control", id = "txtRoomPrice" })
</div>
<div class="form-group ">
#Html.LabelFor(model => model.BookingStatusId)
#Html.DropDownListFor(model => model.BookingStatusId, #Model.ListOfBookingStatus, new { #class = "form-control", id = "ddBookingStatus" })
</div>
<div class="form-group ">
#Html.LabelFor(model => model.RoomTypeId)
#Html.DropDownListFor(model => model.RoomTypeId, #Model.ListOfRoomType, new { #class = "form-control", id = "ddRoomType" })
</div>
<div class="form-group ">
#Html.LabelFor(model => model.RoomCapacity)
#Html.TextBoxFor(model => model.RoomCapacity, new { #class = "form-control", id = "txtRoomCapacity" })
</div>
<div class="form-group ">
#Html.LabelFor(model => model.RoomDescription)
#Html.TextBoxFor(model => model.RoomDescription, new { #class = "form-control", id = "txtRoomDescription" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.RoomImage)
<input id="UpLoadImage" type="file" class="form-control" name="roomImage" title="Load Image" onchange="DisplayImage(this)" />
<img id="imgRoom" height="200" width="280" style="border:solid" />
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnSave" type="button" class="btn btn-success">Save</button>
<button type="button" data-dismiss="modal" class="btn btn-danger">Close</button>
</div>
</div>
</div>
Room_controler
enter code here
public ActionResult Index(){
RoomViewModel objRoomViewModel = new RoomViewModel();
objRoomViewModel.ListOfBookingStatus = (from obj in objHotelDbEntities.BookingStatus
select new SelectListItem()
{
Text = obj.BookingStatus,
Value = obj.BookingStatusId.ToString()
}).ToList();
objRoomViewModel.ListOfRoomType = (from obj in objHotelDbEntities.RoomTypes
select new SelectListItem()
{
Text = obj.RoomTypeName,
Value = obj.RoomTypeId.ToString()
}).ToList();
return View(objRoomViewModel);
}
image of the problem

Controls Shifted after Displaying Error

This is very embarrassing, but I am having a hard time getting it to display correctly. The form below has several controls which display correctly without validation message. However, the controls are shifted when I display the validation's error message; they are all over the place. After reading the bootstrap document and doing quite a bit of searching only, I played around with the clearfix and tried display table with no success. What can I do to prevent the controls from shifting after display a validation message?
Here is the HTML being used.
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">First Name:</p> <label aria-hidden="true" for="FirstName">First Name:</label>
#Html.TextBoxFor(mbox => mbox.FirstName, new { #class = "form-control", id = "FirstName" })
<span id="FirstNameError" class="error" aria-live="assertive" style="display:block; padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Middle Name:</p> <label for="middleName" aria-hidden="true">Middle Name:</label>
#Html.TextBoxFor(m => m.MiddleName, new { #class = "form-control", id = "middleName" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Last Name:</p> <label for="LastName" aria-hidden="true">Last Name:</label>
#Html.TextBoxFor(m => m.LastName, new { id = "LastName", #class = "form-control" })
<span id="LastNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Department:</p><label for="Department" aria-hidden="true">Department:</label>
#Html.TextBoxFor(m => m.Department, new { #class = "form-control", id = "Department" })
<span id="DepartmentError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Office Number:</p><label for="OfficeNumber" aria-hidden="true">Office Number:</label>
#Html.TextBoxFor(mbox => mbox.OfficeNumber, new { id = "OfficeNumber", #class = "form-control" })
<span id="OfficeNumberError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Extension:</p> <label aria-hidden="true" for="Extension">Extension:</label>
#Html.TextBoxFor(mbox => mbox.Extension, new { id = "Extension", #class = "form-control" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">User Name:</p> <label for="UserName" aria-hidden="true">User Name</label>
#Html.TextBoxFor(m => m.UserName, new { id = "UserName", #class = "form-control" })
<span id="UserNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Password:</p><label for="Password" aria-hidden="true">Password:</label>
#Html.PasswordFor(m => m.Password, new { id = "Password", #class = "form-control" })
<span id="PasswordError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Email Address:</p><label for="emailAddress" aria-hidden="true">Email Address:</label>
#Html.TextBoxFor(m => m.EmailAddress, new { id = "emailAddress", #class = "form-control" })
<span id="EmailAddressError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Practitioner</p><label for="Practitioner" aria-hidden="true">Practitioner:</label>
#Html.DropDownListFor(mbox => mbox.PractitionerID, new SelectList(Model.availablePractitioners, "ID", "FullName"), new { id = "Practitioner", #class = "form-control" })
<span id="PractitionerError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Active:</p><label for="Active" aria-hidden="true">Active:</label>
#Html.CheckBoxFor(m => m.Active, new { id = "Active", #class = "form-control", #checked = "checked" })
</div>
</div>
</div>
After posting the question, I realized that wrapping a group of 3 controls inside a col-xs-12 will prevent them from shifting.
<div class="col-xs-12">
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">First Name:</p> <label aria-hidden="true" for="FirstName">First Name:</label>
#Html.TextBoxFor(mbox => mbox.FirstName, new { #class = "form-control", id = "FirstName" })
<span id="FirstNameError" class="error" aria-live="assertive" style="display:block; padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Middle Name:</p> <label for="middleName" aria-hidden="true">Middle Name:</label>
#Html.TextBoxFor(m => m.MiddleName, new { #class = "form-control", id = "middleName" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Last Name:</p> <label for="LastName" aria-hidden="true">Last Name:</label>
#Html.TextBoxFor(m => m.LastName, new { id = "LastName", #class = "form-control" })
<span id="LastNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
</div>

Cannot align static fields for Details page in Bootstrap

I want to use label as used "Static Control" label on that page. However, although I use the same Bootstrap version, I cannot aligned my form controls like that (I want the label is right float, data fields is left float -side by side - and there is a ":" sign between them. Howwver, the result is as shown on the image below. Could you please have a look at my code and inform what is wrong?
The code on that page:
<div class="form-group">
<label class="col-md-3 control-label">Static Control</label>
<div class="col-md-9">
<p class="form-control-static"> email#example.com </p>
</div>
</div>
The code I use on my Razor page:
<div class="form-group">
#Html.LabelFor(m => m.Name, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
<br />
<div class="form-group">
#Html.LabelFor(m => m.Surname, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Surname, new { #class = "form-control-static" })
</div>
</div>
You have two elements which equal 100% width plus the colon, so it pushes the value down a line. You'll need to just code the label instead of using an HtmlHelper to add the colon. Change it to this:
<div class="form-group">
<label class="col-md-3 control-label">#Model.Name:</label>
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
Here is the final solution fixed the problem. Thanks a lot for all of your helps...
<style>
.col-sm-3 .control-label {
float: right !important;
margin-top: 0 !important;
}
/*Add colon ( : ) to the end of labels */
.col-sm-3 > label:after {
content: " :";
}
</style>
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Name, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Name)
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Surname, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Surname)
</div>
</div>
<br />

Aligning issue using input-group/input-group-addon in Bootstrap

In my project I have a form with three inputs, and for all I want to use the input-group and input-group-addon offered by Bootstrap. If I use the following code,
<div class="input-group form-group">
<span style="text-align:left;" class="input-group-addon">... vs Frank</span>
#Html.TextBoxFor(model => model.vsFrank, new { #class = "form-control" })
</div>
<div class="input-group form-group">
<span style="text-align:left;" class="input-group-addon"> ... vs any other guy</span>
#Html.TextBoxFor(model => model.vsAnyOther, new { #class = "form-control" })
</div>
<div class="input-group form-group ">
<span style="text-align:left;" class="input-group-addon">... vs any other monster</span>
#Html.TextBoxFor(model => model.vsAnyMonster, new { #class = "form-control" })
</div>
the result looks like this,
Now, I'd like to have the labels of the last two rows lined up, but the one of the first row shorter. If I add some width to them, as follows,
<div class="input-group form-group">
<span style="width:15ch; text-align:left;" class="input-group-addon">... vs Frank</span>
#Html.TextBoxFor(model => model.vsFrank, new { #class = "form-control" })
</div>
<div class="input-group form-group">
<span style="width:25ch; text-align:left;" class="input-group-addon"> ... vs any other guy</span>
#Html.TextBoxFor(model => model.vsAnyOther, new { #class = "form-control" })
</div>
<div class="input-group form-group ">
<span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other monster</span>
#Html.TextBoxFor(model => model.vsAnyMonster, new { #class = "form-control" })
</div>
the result looks like this:
Now the whole first control is shortened! How can I prevent that without giving all the controls explicit width?
Add a min-width for the input-group.
CSS
.input-group {
min-width: 100%;
}
HTML
<div class="row">
<div class="col-md-3">
<div class="input-group form-group">
<span style="width:15ch; text-align:left;" class="input-group-addon">... vs Frank</span>
<input class="form-control">
</div>
<div class="input-group form-group">
<span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other guy</span>
<input class="form-control">
</div>
<div class="input-group form-group">
<span style="width:25ch; text-align:left;" class="input-group-addon">... vs any other monster</span>
<input class="form-control">
</div>
</div>
</div>
Bootply

Resources