Create view put table on the right side of the screen - html

I having MVC project with User entity which have one to many relationship with address,
I use code first and by scaffolding generate the view . in the create operation I see in the left side of the screen the fields from userid until working at .what I need is very simple,in the right side of the screen create table on the create view which is currently empty with one column that user can add to address,how should I do that?
Im very new to MVC and didn't find any documentation on how to add control like table in the right side of the create vied.
I try something like this without success
the table is in the bottom of the screen
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>User</h4>
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.UserId, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserId)
#Html.ValidationMessageFor(model => model.UserId)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.WorkingAt, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.WorkingAt)
#Html.ValidationMessageFor(model => model.WorkingAt)
</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>
//This is the table which I want to be in the right side of the screen
<table class="table">
<tr>
<th>
#Html.EditorFor(model => model.Adress)
</th>
</table>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}

Try this:
<table class="table col-md-offset-11 col-md-10">
<tr>
<th>
#Html.EditorFor(model => model.Address)
</th>
</table>

Related

Adjusting width of TextAreaFor

I have a form that has a few TextBoxFor and 1 TextAreaFor
Here it is:
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(m => m.FromName, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FromName, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FromName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.FromEmail, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FromEmail, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FromEmail)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ToEmail, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.ToEmail, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.ToEmail)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Message, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextAreaFor(m => m.Message,60, 150, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-primary" value="Send" />
</div>
</div>
</div>
A picture of what it looks like:
The problem is that I am unable to adjust the width of the TextAreaFor.
I know that Bootstrap grid system is restricting this, but I don't think this should be impossible to simply keep the label where it is, but make the textareafor wider instead of taller.
What I am looking for, is my TextAreaFor to be wider than the regular TextBoxFor. I have tried inserting outrageous numbers into the int rows && int columns parameters of TextAreaFor but the only one that seems to work is int rows.
Any idea on how I can get my TextAreaFor to expand across the page?
Any help is appreciated.
UPDATE:
I have created this Bootply for all of you.
I have figured this out. After Inspecting the Elements, I saw that all of the input, textarea, and select had a max-width of 280px.
So all I had to do was give the textarea a class and set its max-width to something that I prefer.

Generate textbox with an addon button

in ASP.NET MVC I want to generate this kind of textbox:
http://getbootstrap.com/components/#input-groups-basic
http://screencast.com/t/u1WjajPTDC76
The code I am using is the following:
<div class="form-group">
#Html.LabelFor(model => model.UserPrincipalName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserPrincipalName)
<span class="input-group-addon" id="basic-addon2">#Html.Label(xx.Utils.SettingsHelper.Domain)</span>
#Html.ValidationMessageFor(model => model.UserPrincipalName)
</div>
</div>
However the behavior I get is not the
http://screencast.com/t/DV7VGtVakbSY
You are using <div class="form-group"> but it must be <div class="input-group">

How do you left align a div?

I Have tried to left align a div by using:
<div class="col-md-3 float-left">
and
<div class="col-md-3" style="text-align: left;">
nothing I try is working?
I tried the float now and the !important and still not working, so here is more of my code:
<div class="form-horizontal">
<h4>Branch</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group col-md-12">
<div class="col-md-2">
#Html.LabelFor(model => model.BranchName, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-3">
#Html.EditorFor(model => model.BranchName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.BranchName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group col-md-12">
<div class="col-md-2">
#Html.LabelFor(model => model.Active, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-md-3" style="float: left !important;">
#Html.EditorFor(model => model.Active)
#Html.ValidationMessageFor(model => model.Active, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class=" col-md-offset-1 col-md-2">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
And here is a pic to see what I mean. It looks terrible with the checkbox and the textbox so far from their labels.
Can't tell you much without more code or a more specific description of the problem. Regardless of that, my assumption is that you need the contents of a div left aligned? By the class names you are using, I assume you are using Bootstrap. In that case, try adding this class to your div:
text-left
If that doesn't work, try this:
style="text-align: left !important;"
If the second one works, you have CSS that is written somewhere else that is predominate, try to find this CSS and remove/change it. If you are confused about this, read up on CSS Specificity. Do not leave the !important attached for no reason; in general this is considered bad practice.
reference:
http://getbootstrap.com/css/#type-alignment
For left align of a div
<div style="float: left;"></div>
for left align of a text
<p style="text-align:left;"></p>
Try
<div class="col-md-1">
instead of
<div class="col-md-2">
on your Label Div's
The gap should come from the size of the col-md-2. If you choose col-md-1 the gap should be smaller.
You want to allign a div, and not a text. So you can use:
<div class="col-md-3" style="float:left">

How can I make everything(input textbox and buttons, and background image) on my MVC 5 page fixed no matter the screen size?

I am new to HTML/CSS/JS and trying to rewrite a ColdFusion PHP website(http://startabusinessweekend.com) to ASP.NET MVC5 EF5 with bootstrap 3 built-in.
I got all the business logic and functionalities working. I have been searching all day to figure out how to mimic the EXACT screen behavior. i.e. to keep the background image and the input text box fixed regardless of the screen sizes. I know this is the opposite of what MVC5/bootstrap is supposed to do - Responsive Web Design. Apart of redesigning the layout, I need to use the same layout and get it done in two days!
The problem I struggled with is that the input text boxes "float" around as the screen sizes change/shrink, which normally should be what you want for a RWD website. How can I dumb-down MVC5/bootstrap to display fixed content as you can see in the current website. http://startabusinessweekend.com.
In addition, the top part of the background image on my MVC webpage doesn't get displayed either.
If there is an answer out there please forgive me.
Thanks in advance!
here is the view cshtml I wrote:
#model SABW.Models.tTellUsAboutYou
#{
ViewBag.Title = "Start a Business Weekend";
}
#*<h2>Create</h2>*#
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#*<div id="background" />*# #* background image *#
#Html.ValidationSummary(true)
<div class="form-group"> #* form-group is equalvalent to a row *#
#*#Html.LabelFor(model => model.FirstName, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-lg-12">
#Html.TextBoxFor(model => model.FirstName, new { #placeholder = "First Name" })
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="form-group">
#*#Html.LabelFor(model => model.LastName, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-md-12 col-xs-12">
#*#Html.EditorFor(model => model.LastName)*#
#Html.TextBoxFor(model => model.LastName, new { #placeholder = "Last Name" })
#Html.ValidationMessageFor(model => model.LastName)
</div>
</div>
<div class="form-group">
#*#Html.LabelFor(model => model.EmailAddress, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-md-12 col-xs-12">
#*#Html.EditorFor(model => model.EmailAddress)*#
#Html.TextBoxFor(model => model.EmailAddress, new { #placeholder = "Email Address" })
#Html.ValidationMessageFor(model => model.EmailAddress)
</div>
</div>
<div class="form-group">
#*#Html.LabelFor(model => model.DayTimePhone, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-md-12 col-xs-12">
#*#Html.EditorFor(model => model.DayTimePhone)*#
#Html.TextBoxFor(model => model.DayTimePhone, new { #placeholder = "Phone" })
#Html.ValidationMessageFor(model => model.DayTimePhone)
</div>
</div>
<div class="form-group">
#*#Html.LabelFor(model => model.Zip, new { #class = "control-label col-md-2 col-xs-2" })*#
<div class="col-md-12 col-xs-12">
#*#Html.EditorFor(model => model.Zip)*#
#Html.TextBoxFor(model => model.Zip, new { #placeholder = "Zip Code" })
#Html.ValidationMessageFor(model => model.Zip)
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-xs-3">
<input type="submit" value="Please sign me up now" class="btn btn-danger" />
</div>
<div class="col-md-9" id="video">
<iframe width="400" height="283" src="//www.youtube.com/embed/VpVo8WRpb9c" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-xs-2 col-md-offset-4 col-xs-offset-4">
<h3>#*#Html.ActionLink("FAQ'S", "QnA", "SABW")*# </h3> #* need to pass the ViewBag.SourceName to the FAQ controller*#
<h2>#Html.ActionLink("FAQ'S", "QnA") </h2> #* need to pass the ViewBag.SourceName to the FAQ controller*#
</div>
</div>
<input type="hidden" name="SourceName" id="SourceName" value="#ViewBag.SourceName" />
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
and here is the _Layout.cshtml (I tried to tweaked the viewport!)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#*<meta name="viewport" content="width=2048, min-scale=1.0, max-scale=1.0, initial-scale=1.0">*#
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
**bold**<div id="background"/>**bold** #* background image *#
<div class="container body-content">
#RenderBody()
#*<hr />*#
<footer>
<p id="privacy">©#DateTime.Now.Year The Entrepreneur's Source | Privacy Policy</p>
</footer>
</div>
#Scripts.Render("~/bundles/jqueryval") #* KHP 12/19/2014 added for validation *#
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Start with 'fixing' the middle section
<div class="container-fixed">
<div class="row maincontent">
.. content goes here..
</div>
</div>
css
.container-fixed {
margin: 0 auto;
max-width: 800px; //width : 800px;
}
.maincontent{
background-image: url('bg.png');
}

put Button and text box in parallel

Im trying to put the following button and text box in parallel that the button in the left side and the text box in the right ,I try with span and margin but currently the text box is under the button ,how should I do that>
<span>
<input type="submit" id="Connect" style="margin-left: 195px; width: 150px;" class="btn action-but" />
<div class="form-group">
#Html.LabelFor(model => model.Service, new { #class = "col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
#Html.ValidationMessageFor(model => model.Service)
</div>
</div>
</span>
If i understand good you want to show something like this:
[button] [label text errors]
To do that a easy way is to add in style: display: inline-block;
The result, based on your code will be something like this
<span>
<input type="submit" id="Connect" style="display: inline-block;margin-left: 195px; width: 150px;" class="btn action-but" />
<div class="form-group" style="display: inline-block;">
#Html.LabelFor(model => model.Service, new { #class = "col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
#Html.ValidationMessageFor(model => model.Service)
</div>
</div>
</span>
You can find in JsFiddle a demo of this: http://jsfiddle.net/pR6Wg/
I think you are looking for vertical form. look at this example bootstrap vertical form
Razor example
<form class="form-inline" role="form">
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">#</div>
#Html.TextBoxFor(model => model.Service, new { #class="form-control", #placeholder="Enter email" })
</div>
</div>
</form>
Remove margin-left: 195px of submit button add add it inside .col-md-2 before the label.
and change <div class="col-md-10"> to <div class="col-md-8">
DEMO
CODE
<span>
<div class="form-group">
<div class="col-md-2">
<input type="submit" id="Connect" style=" width: 150px;" class="btn action-but" />
</div>
#Html.LabelFor(model => model.Service, new { #class = "col-md-2" })
<div class="col-md-8">
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
#Html.ValidationMessageFor(model => model.Service)
</div>
</div>
</span>
Why don't use a table? Or you want to do it with div's?
<table class="col-md-10">
<td>
<tr>
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
</tr>
</td>
<td>
<tr>
#Html.ValidationMessageFor(model => model.Service)
</tr>
</td>
</table>
Hope it helps! =)