Flexbox dislocating shared layout components in an ASP.NET MVC (FX) application - html
I have this _Layout.cshtml file that is shared amongst all views in my app:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - HR Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home")" title="List View" class="links">
<img alt="List View" src="#Url.Content("~/Images/WVDOT.png")" style="width:60px; height:60px; margin-right: 10px">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("WC Inbox Forms", "Index", "WC_Inbox")</li>
<li>#Html.ActionLink("Employees", "Index", "Employees")</li>
<li>#Html.ActionLink("Archived", "Archive", "WC_Inbox")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
Which provides the header and footer for pages and ends up looking like this:
However 1 page in the app needs to be kind of specifically styled so I chose to use flexbox and made this stylesheet which makes everything on the page with which I use this stylesheet look great:
.pageContainer {
display: flex;
flex-direction: column;
}
.title {
display: flex;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.Info {
width: 70%;
flex-direction: column;
}
.infobox {
width: 30%;
flex-direction: column;
justify-content: center;
}
.innerBox {
display: flex;
justify-content: center;
flex-direction: column;
width: 250px;
border: 1px solid black;
background-color: lightyellow;
border-radius: 5px;
}
.title2 {
display: flex;
justify-content: center;
}
However, ever since I added flexbox to this css sheet my navbar on only this page has been repositioned along with the footer being moved to the top of the page:
Why is this happening and how can I fix it? I'd prefer not to change the layout page if possible as it is being used successfully in every other page in the app. If you need it, here is the create page that that is in question (it is rather long):
#model HR_APP_V2.Models.WC_Inbox
<link href="~/Styles/FormCreate.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Create";
}
<div class="pageContainer">
<h3 class="title">Create a new Injury Form for #ViewBag.Name</h3>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.Hidden("EmployeeID", (object)ViewBag.EmployeeID)
#Html.Hidden("Status", (object)ViewBag.Status)
#Html.Hidden("fullName", (object)ViewBag.Name)
<div class="container">
<div class="Info">
<div class="form-group">
#Html.LabelFor(model => model.District, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("District", new List<SelectListItem>
{
new SelectListItem {Text = "District 1", Value="1" },
new SelectListItem {Text = "District 2", Value="2" },
new SelectListItem {Text = "District 3", Value="3" },
new SelectListItem {Text = "District 4", Value="4" },
new SelectListItem {Text = "District 5", Value="5" },
new SelectListItem {Text = "District 6", Value="6" },
new SelectListItem {Text = "District 7", Value="7" },
new SelectListItem {Text = "District 8", Value="8" },
new SelectListItem {Text = "District 9", Value="9" },
new SelectListItem {Text = "District 10", Value="10" }
}, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Org_Number, "Org Number", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Org_Number, new { htmlAttributes = new { #class = "form-control", placeholder = "0025" } })
#Html.ValidationMessageFor(model => model.Org_Number, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Hire_Date, "Hire Date", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Hire_Date, new { htmlAttributes = new { #class = "datepicker" } })
#Html.ValidationMessageFor(model => model.Hire_Date, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Job_Title, "Job Title", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Job_Title, new { htmlAttributes = new { #class = "form-control", placeholder = "Programmer Analyst" } })
#Html.ValidationMessageFor(model => model.Job_Title, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Work_Schedule, "Work Schedule", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Work_Schedule", new List<SelectListItem>
{
new SelectListItem {Text = "8 hours per day, 5 days per week", Value="8 hours per day, 5 days per week" },
new SelectListItem {Text = "8.5 hours per day, 5 days per week", Value="8.5 hours per day, 5 days per week" },
new SelectListItem {Text = "9 hours per day, 5 days per week", Value="9 hours per day, 5 days per week" },
new SelectListItem {Text = "10 hours per day, 4 days per week", Value="10 hours per day, 4 days per week" },
new SelectListItem {Text = "10 hours per day, 5 days per week", Value="10 hours per day, 5 days per week" },
new SelectListItem {Text = "10.5 hours per day, 4 days per week", Value="10.5 hours per day, 4 days per week" },
new SelectListItem {Text = "10.5 hours per day, 5 days per week", Value="10.5 hours per day, 5 days per week" },
new SelectListItem {Text = "11 hours per day, 4 days per week", Value="11 hours per day, 4 days per week" },
new SelectListItem {Text = "11 hours per day, 5 days per week", Value="11 hours per day, 5 days per week" },
new SelectListItem {Text = "12 hours per day, 4 days per week", Value="12 hours per day, 4 days per week" },
new SelectListItem {Text = "12 hours per day, 5 days per week", Value="12 hours per day, 5 days per week" },
}, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Work_Schedule, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="infobox">
<div class="innerBox">
<h4 class="title2">Employment information</h4>
<hr style="border:0px;border-top:1px solid black;width:75%;" />
<p>Information Related to the Employee's Position</p>
</div>
</div>
</div>
<hr style="border:0px;border-top:1px solid grey;width:75%;" />
<div class="container">
<div class="Info">
<div class="form-group">
#Html.LabelFor(model => model.Injury_Date, "Injury Date", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Injury_Date, new { htmlAttributes = new { #class = "datepicker" } })
#Html.ValidationMessageFor(model => model.Injury_Date, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Injury_Time, "Injury Time", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Injury_Time, new { htmlAttributes = new { #class = "form-control", placeholder = "2:00pm" } })
#Html.ValidationMessageFor(model => model.Injury_Time, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DOT_12, "Injury Documented on DOT-12?", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("DOT_12", new List<SelectListItem>
{
new SelectListItem {Text = "Yes", Value="Yes" },
new SelectListItem {Text = "No", Value="No" },
new SelectListItem {Text = "DOT-12 Pending", Value="DOT-12 Pending" },
new SelectListItem {Text = "Not Applicable", Value="Not Applicable" },
}, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Start_Time, "Start Time on Date of Injury", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Start_Time, new { htmlAttributes = new { #class = "form-control", placeholder = "8:00am" } })
#Html.ValidationMessageFor(model => model.Start_Time, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Injured_Body_Part, "Injured Body Part", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Injured_Body_Part, new { htmlAttributes = new { #class = "form-control", placeholder = "Forearm" } })
#Html.ValidationMessageFor(model => model.Injured_Body_Part, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Side, "Which Side", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Work_Schedule", new List<SelectListItem>
{
new SelectListItem {Text = "Left", Value="Left" },
new SelectListItem {Text = "Right", Value="Right" },
new SelectListItem {Text = "Both", Value="Both" },
new SelectListItem {Text = "Not Applicable", Value="Not Applicable" },
new SelectListItem {Text = "See Comments", Value="See Comments" },
}, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Missing_Work, "Missing Work", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Missing_Work)
#Html.ValidationMessageFor(model => model.Missing_Work, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Return_to_Work_Date, "Return to Work Date", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Return_to_Work_Date, new { htmlAttributes = new { #class = "datepicker" } })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Doctors_Release, "Doctor's Work Release Obtained? (Do not choose Yes unless you have the work release in hand; Send it to HR)", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Doctors_Release", new List<SelectListItem>
{
new SelectListItem {Text = "Yes", Value="Yes" },
new SelectListItem {Text = "No", Value="No" },
new SelectListItem {Text = "Not Yet", Value="Not Yet" },
new SelectListItem {Text = "Not Treated", Value="Not Treated" },
}, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Treatment, "Treatment Pursued/Scheduled?", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.CheckBoxFor(model => model.Treatment)
#Html.ValidationMessageFor(model => model.Treatment, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Injury_Description, "Injury Description", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.TextAreaFor(model => model.Injury_Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Injury_Description, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Equipment, "Equipment", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Equipment, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Equipment, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Witness, "Name witnesses if any (If none, state no witnesses).", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Witness, new { htmlAttributes = new { #class = "form-control", #cols = 40, #rows = 10 } })
#Html.ValidationMessageFor(model => model.Witness, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Questioned, "If the injury is questioned, state why (If not questioned, say 'Not Questioned').", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Questioned, new { htmlAttributes = new { #class = "form-control", placeholder = "Not Questioned" } })
#Html.ValidationMessageFor(model => model.Questioned, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Medical_History, "If there is a prior relevant medical history, mention what it is (If none known, state none known).", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Medical_History, new { htmlAttributes = new { #class = "form-control", placeholder = "None known" } })
#Html.ValidationMessageFor(model => model.Medical_History, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Inbox_Submitted, "Was this inbox submitted within 48 hours/2 business days of the injury date?", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Inbox_Submitted", new List<SelectListItem>
{
new SelectListItem {Text = "Yes", Value="Yes" },
new SelectListItem {Text = "No", Value="No" },
}, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Inbox_Reason, "Reason", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Inbox_Reason, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Inbox_Reason, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Comments, "Comments", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Comments, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Comments, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="infobox">
<div class="innerBox">
<h4 class="title2">Injury</h4>
<hr style="border:0px;border-top:1px solid black;width:75%;" />
<p>Enter Information About the Employee's Injury</p>
</div>
</div>
</div>
<hr style="border:0px;border-top:1px solid grey;width:75%;" />
<div class="container">
<div class="Info">
<div class="form-group">
#Html.LabelFor(model => model.User_Email, "User Email", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.User_Email, new { htmlAttributes = new { #class = "form-control", placeholder = "John.Doe#wv.gov" } })
#Html.ValidationMessageFor(model => model.User_Email, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Contact_Email, "Contact Email", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Contact_Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Contact_Email, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Specialist_Email, "Specialist Email", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-4">
#Html.EditorFor(model => model.Specialist_Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Specialist_Email, "", new { #class = "text-danger" })
</div>
<div style="margin-right:1%"><p style="color:#FF0000">*</p></div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Optional_Email, "Optional Email", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Optional_Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Optional_Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Optional_Email2, "Optional Email 2", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Optional_Email2, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Optional_Email2, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Optional_Email3, "Optional Email 3", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Optional_Email3, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Optional_Email3, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Optional_Email4, "Optional Email 4", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Optional_Email4, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Optional_Email4, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="infobox">
<div class="innerBox">
<h4 class="title2">Email</h4>
<hr style="border:0px;border-top:1px solid black;width:75%;" />
<p>Enter Your Email Address , a District Contact's Email Address, and an Occupational Safety Specialist's Email Address. Add Optional Email Addresses if you are submitting the form on behalf of the designated reporter and you want the designated reporter to receive a copy.</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
The .container styles are causing the issues.
You are using .container in a few places, with your FormCreate.css (I am assuming the styles you posted are from that file) .container styles overriding the global .container styles.
In your separate page, rename the .container class to something that doesn't already have styles, and update the styles to use that new class, and it should fix your issues.
Alternatively nest your .container styles under a parent .pageContainer .container { // styles } or .form-horizontal .container { // styles }
Related
HTMl layout in MVC 5 Razor Page using bootstrap css not showing the way I want it to
I am having a great deal of trouble trying to get things to line up correctly and be presented in the same row. I am using MVC 5 razor pages with HTML and Bootstrap.css file. I have been fiddling with it for a few days now making limited progress from where I began. I will post anything else that is needed in order to help me figure this out - there are more divisions in the table - but I wanted to be as brief as possible.
Here is the screen shots of what I do not want and what I am trying to achieve:
Here is my markup code:
<table style="width: 1562px; height: 836px;" cellpadding="1"; cellspacing="0"; border="1"; >
<caption class = "control-label col-md-2", style = "display:inline; white-space:nowrap">
#Html.DisplayFor(model => model.Title)<br>
</caption>
<tbody>
<tr>
#*SECTION TITLE MODIFIED .. CATEGORY*#
<td colspan="1" rowspan="4" style="vertical-align: middle; width: 244px; margin-left:4px" class="form-horizontal" >
<br>
<ul style="color: blue; list-style-type: none; list-style-image: none; list-style-position: outside; width: 260px;" class="form-horizontal">
<li>
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</li>
<li>
#Html.LabelFor(model => model.PublishDate, htmlAttributes: new { #class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })
#Html.EditorFor(model => model.PublishDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PublishDate, "", new { #class = "text-danger" })
</li>
<li style="display:inline-block; width:auto">
<div class="form-horizontal">
#Html.LabelFor(model => model.ModifiedDate, htmlAttributes: new { #class = "control-label col-md-2", style = "display:inline; white-space:nowrap" })
<div style="width:50%">
#Html.EditorFor(model => model.ModifiedDate, new { htmlAttributes = new { #class = "form-control" , style= "width:50%" } })
#Html.ValidationMessageFor(model => model.ModifiedDate, "", new { #class = "text-danger", style = "width:50%" })
</div>
</div>
</li>
<li> <p style="display:inline-block">
<div class="form-horizontal" id="isActive">
#Html.LabelFor(model => model.IsActive, htmlAttributes: new { #class = "control-label col-md-1" })
</div>
<div class="checkbox" style="align-items:flex-end;">
#Html.EditorFor(model => model.IsActive)
#Html.ValidationMessageFor(model => model.IsActive, "", new { #class = "text-danger" })
</div>
</p>
<br style="line-height:20px" />
</li>
<li> <p>
<div class="form-horizontal" id="ddlCategoryGroup" style="display:inline-block;white-space:nowrap;">
#Html.LabelFor(model => model.CategoryId, "Category", htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<br style="line-height:25px;" />
<p>
<div class="col-md-10" id="ddlCategory">
#Html.DropDownList("CategoryId", null, htmlAttributes:
new { #class = "form-control", style = "font-family:'Franklin Gothic Medium', 'ArialNarrow', Arial, sans-serif; font-size:1.2EM; width:auto; display:inline; white-space:nowrap" })
#Html.ValidationMessageFor(model => model.CategoryId, "", new { #class = "text-danger" })
</div>
</p><br/>
<p style="display:inline-block">
<div>
#Ajax.ActionLink("New", "Create", "Category", Model.Category,
new AjaxOptions { UpdateTargetId = "ddlCategory", InsertionMode = InsertionMode.Replace },
new { htmlAttributes = new { #class = "control-label col-md-2" } }) |
#Ajax.ActionLink("Edit", "Edit", "Category", Model.Category,
new AjaxOptions { UpdateTargetId = "ddlCategory", InsertionMode = InsertionMode.Replace },
new { htmlAttributes = new { #class = "control-label col-md-2" } }) |
#Html.ActionLink("Delete", "Delete", new { id = #Model.CategoryId }, new { htmlAttributes = new { #class = "control-label col-md-2" } })
</div>
</p>
</p>
</li>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
For the "published on" and "last modified" input fields you can try using the flex classes in bootstrap. <div class="d-flex"> <input type="text" /> <button><i class="fa fa-calendar"></i></button> </div> 1.bootstrap doc flex 2.Here is a cheat sheet for flex boxes
Instead of using tables and List elements for designing I would prefer to use bootstrap classes and div elements as they will give you more control on what you are doing. Take a look at the following code.
First make a parent div with class form-horizontal then for each input make a div with class form-group
<div class="form-horizontal">
<h4>Write a Suitable title for your Form</h4>
<hr />
<div class="form-group"> #*Create this div for each form input element*#
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-6"> #*Based on your requirement you can change the col-md-3 value any where from 1 to 10*#
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
</div>
So as you noticed
for complete form we are having a div parent class form-horizontal
for each input element we will have a form-group div class
within each form-group we will have 2 elements label and a div with class col-md-6(or whatever length you prefer) containing the main input element(textbox, dropdown, checkbox etc)
So stop using li Elements and replace them with div with class form-group will sort many issues for you.
adjust alignment of dropdowns
I have a problem adjusting my dropdowns to equally aligned to my textarea.
Html:
<!-- YEAR -->
<div class="col-md-6 col-md-push-1">
<div class="form-group">
#Html.LabelFor(model => model.Year, htmlAttributes: new { #class = "control-label col-md-6" })
#Html.DropDownListFor(model => model.Year, ViewBag.years as IEnumerable<SelectListItem>,
"-- Select Year --", new { #class = "form-control", #id = "cbYears" })
#Html.ValidationMessageFor(model => model.Year, "", new { #class = "text-danger" })
</div>
</div>
<!-- MONTH -->
<div class="col-md-6 col-md-push-1">
<div class="form-group">
#Html.LabelFor(model => model.Month, htmlAttributes: new { #class = "control-label col-md-12" })
#Html.DropDownListFor(model => model.Month, ViewBag.months as IEnumerable<SelectListItem>,
"-- Select Month --", new { #class = "form-control", #id = "cbMonth" })
#Html.ValidationMessageFor(model => model.Month, "", new { #class = "text-danger" })
</div>
</div>
<!-- GOOD -->
<div class="form-group">
<div class="col-md-4 col-md-push-1">
#Html.LabelFor(model => model.Good, htmlAttributes: new { #class = "control-label col-md-8" })
</div>
<div class="col-md-10 col-sm-push-1">
#Html.TextAreaFor(model => model.Good, new { maxlength = 5000, rows = "10", cols = "200", id = "txtGood" })
#*#Html.TextAreaFor(model => model.Good, new { maxlength = 5000, id = "txtGood" })*#
#Html.ValidationMessageFor(model => model.Good, "", new { #class = "text-danger" })
</div>
</div>
I just want to adjust my Month,Geography and Process dropdowns to push a little bit more to the right so it aligned to my textarea.
Preview
I think your .col-md classes have default bootstrap padding or margin.
So you can add the ".nopadding" class to a particular .col-md div to remove it.
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
Bootstrap3 mvc 5 - center form div
I have a headache from this design.
How I can separate a little bit in inline form label and textbox which belongs to form-control class.
I've tried everything, and margin and align-text, but I didnt find solution
Here is a photo:
Here is the code:
<div class="container">
<div class="row">
<div class="span9">
<br />
<h2 style="margin-top:100px;text-align:center">
APPLY FOR INTERNSHIP PROGRAM
</h2>
</div>
<div class="col-md-4 col-sm-4 col-md-offset-4">
<br />
<div class="form-group">
#Html.LabelFor(model => model.Name, "Name", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Surname, "Surname", htmlAttributes: new { #class = "control-label col-md-2 col-md-2 col-sm-2" })
#Html.EditorFor(model => model.Surname, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Surname, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Location, "Location", htmlAttributes: new { #class = "control-label col-md-2" })
#*#Html.DropDownList("LocationID", null, "--Choose location--", new { #class = "form-control" })*#
#Html.DropDownListFor(model => model.LocationID, ViewBag.LocationID as IEnumerable<SelectListItem>, "-----Select Category-----", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Location, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Mail, "E-mail", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Mail, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Mail, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Telephone, "Telephone number", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.Telephone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Telephone, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.StartEduYear, "Entrance study year", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.StartEduYear, ViewBag.StartYearFaculty as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.StartEduYear, "", new { #class = "text-danger" })
</div><br />
<div class="form-group">
#Html.LabelFor(model => model.EnglishLang.NameLang, "English level", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownList("EngID", null, "--Choose level--", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.EngID, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Faculty.FacultyName, "Faculty", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.FacultyID, ViewBag.FacultyID as IEnumerable<SelectListItem>, "--Select a faculty--", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.FacultyID, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.AvgScore, "Average score", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.AvgScore, ViewBag.AverScore as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AvgScore, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.GradYear, "Graduation year", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.DropDownListFor(model => model.GradYear, ViewBag.GradYear as IEnumerable<SelectListItem>, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.GradYear, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.WExp, "Work Experience", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.WExp, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.WExp, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.Interests, "Interests", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Interests, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Interests, "", new { #class = "text-danger" })
</div>
<span>Did you have any additional trainings?</span>
<label for="chkYes">
<input type="radio" id="chkYes" name="chkPassPort" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chkPassPort" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvPassport" style="display: none">
#Html.LabelFor(model => model.Trainings, "Trainings", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Trainings, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Trainings, "", new { #class = "text-danger" })
</div>
<p></p>
<span>Did you have any projects recently?</span>
<label for="chkYes">
<input type="radio" id="chkYes1" name="chkPassPort1" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo1" name="chkPassPort1" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvExample" style="display: none">
#Html.LabelFor(model => model.Projects, "Projects", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.Projects, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Projects, "", new { #class = "text-danger" })
</div>
<p></p>
<span>Have you been in some students organization?</span>
<label for="chkYes">
<input type="radio" id="chkYes2" name="chkPassPort2" onclick=" ShowHideDiv() " />Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo2" name="chkPassPort2" onclick=" ShowHideDiv() " />No
</label>
<div class="form-group" id="dvExample1" style="display: none">
#Html.LabelFor(model => model.StudOrg, "Organizations", htmlAttributes: new { #class = "control-label col-md-2" })
#Html.TextAreaFor(model => model.StudOrg, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.StudOrg, "", new { #class = "text-danger" })
</div>
<p></p>
<input type="submit" value="Apply" class="btn btn-default" style="text-align: center" />
</div>
#*<div class="form-group">
sdsdsdsd
<div class="g-recaptcha" data-sitekey="6LccVRcTAAAAADLo_LxSj4mQzt9jLrgbo5L9wZ-J"></div>
<div>sdsdsds11
#if (TempData["recaptcha"] != null)
{
<p>#TempData["recaptcha"]</p>
}
</div>
</div>*#
#*<div class="col-md-offset-2 col-md-10">
<div class="form-group">1231
#Html.Recaptcha()
</div>
</div>*#
</div>
</div>
I think you need to take another look at Bootstrap documentation. If you're using Bootstrap 3.x, you should not be using span* (that belong to Bootstrap 2.x). span* have been replaced with col-md-*. You can refer to this migration guide. Also, you should place all of your .form-group elements inside a .form-horizontal container.
You're simply not giving the elements enough room. Your form is restricted to 4 columns and then your label is restricted to 2 columns. Essentially, the form is 4/12 of the total available width, then your label is 2/12 of that, which means overall your label is only 1/18 of the total available width. Just give it some more breathing room. Perhaps make your form col-md-6 or col-md-8 and your label something like col-md-3. Or if you want to stick with col-md-4 for the whole form, increase your label to something like col-md-4.
Html elements unexpected behaviour in layout
I have an issue with the layout of some html elements. I have a form which i am changing into a tabbed display in order to split it up and make it more usable. The existing form looks like this:
However, when i use the same code inside of a tab, the result is as below:
As i stated, the code for it is exactly the same as below:
<div class="col-md-12" style="display:block;">
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span id="custSpan" style="font-size:14px;">
#Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
#Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
</span>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
</div>
It appears to be certain elements affecting the layout. So far i have noticed it on both Html.DisplayFor() and Html.EnumDropDownListFor() (an extension of standard DropDownListFor(). It appears to indent the elements on the next line for some reason.
Can anybody help with this?
Many thanks :)
Try this,
<div class="col-md-12" style="display:block;">
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Receiver, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Receiver, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Receiver, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Department.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.CommunicationModel.Communication.Department.Name)
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.DepartmentId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.DateOpened, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<span id="custSpan" style="font-size:14px;">
#Html.DisplayFor(model => model.CommunicationModel.Communication.DateOpened)
#Html.HiddenFor(model => model.CommunicationModel.Communication.DateOpened)
</span>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Method, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.CommunicationModel.Communication.Method, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Method, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Product, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Product, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Product, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.PartNo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.PartNo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.PartNo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CommunicationModel.Communication.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Severity.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.CommunicationModel.Communication.SeverityId, new SelectList(Model.AllSeverities, "Id", "DisplayName"), new { #class = "form-control" })
</div>
</div>
</div>
</div>
html.labelfor doesn't accept any css class as an input
I have two projects in mvc .
in one of them i use this code :
#Html.LabelFor(model => model.Subject, new { #class = "control-label col-lg-2" })
And it works correctly because the project has an extension method for labelfor as you can see here :
public static System.Web.Mvc.MvcHtmlString LabelFor<TModel, TValue>(this System.Web.Mvc.HtmlHelper<TModel> html, System.Linq.Expressions.Expression<Func<TModel,TValue>> expression, object htmlAttributes)
But in the other project when i use the above code i mean :
#Html.LabelFor(model => model.Name, new { #class = "control-label col-lg-2" })
I got this error :
CS1928: 'System.Web.Mvc.HtmlHelper<DomainClass.Task>' does not contain a definition for 'LabelFor' and the best extension method overload 'System.Web.Mvc.Html.LabelExtensions.LabelFor<TModel,TValue>(System.Web.Mvc.HtmlHelper<TModel>, System.Linq.Expressions.Expression<System.Func<TModel,TValue>>, string)' has some invalid arguments
In the object browser i couldn't find the above extension that the other project has.as you can see here :
where is the problem?should i change the mvc version ?
here is the view code :
#model DomainClass.Task
#using System.Web.Mvc.Html;
#{
ViewBag.Title = "Create";
Layout = "~/Areas/Admin/Views/Shared/_LayoutPage.cshtml";
}
#using (Html.BeginForm("Create", "Task", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" ,#class = "cmxform form-horizontal tasi-form" }))
{
<div class="row">
<div class="col-lg-12">
<section class="panel panel-default">
<div class="panel-heading" style="font-weight: bold">ثبت نمایشگاه </div>
<div class="panel-body">
<div class=" form">
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Name, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.StartDate, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.StartDate, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.StartDate, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FinishDate, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.FinishDate, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.FinishDate, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Duration, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.Duration, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Duration, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Importance, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.Importance, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Importance, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateOfSubmit, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.DateOfSubmit, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.DateOfSubmit, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Type, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.Type, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Type, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-success" type="submit">ثبت اطلاعات</button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
}
Best regards
I finally remove my asp.mvc from nuget and install it again .and it works fine.