Center fieldset using Foundation - asp.net-mvc

Im trying to use Foundation grid in my application but I cannot simply center the fieldset. I try to put in the center of the screen on mobile device and desktops, but it just looks weird. Any idea why?
Please, note that Im new to Foundation and I have no experience with Bootstrap
Code below:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="row">
<div class="large-6 large-centered columns">
<fieldset>
<legend>Logging into Review Platform</legend>
<div class="editor-label">
#Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserName)
#Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<p>
<input type="submit" value="Login" class="button" />
</p>
</fieldset>
</div>
</div>
}

A repeat and edit of my comment on the original question:
Are you wanting full width on mobile and centered on desktop? I do this quite often with something like:
.small-12.large-6.large-centered.columns
or you can do something like
.small-10.small-centered.large-6.columns
You don't need the large-centered because it inherits it from the small-centered class. If you want the larger grid to not be centered, use .large-uncentered

Related

Is there a method to standardise form content in MVC razor views?

I have a standardised form layout like this:
<div class="ContentSection">
<div class="ContentSection__content">
<form class="Form form" method="post">
#Html.AntiForgeryToken()
<div class="Form__editors">
#Html.HiddenFor(i => i.Id)
<div class="panel panel-default">
<div class="panel-heading">
Publishing
</div>
<div class="panel-body">
#Html.EditorFor(x => x.PublishOptionsEditor)
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Content
</div>
<div class="panel-body">
#Html.EditorFor(x => x.Title)
#Html.EditorFor(x => x.Slug)
#Html.EditorFor(x => x.OneLiner)
#Html.EditorFor(x => x.HtmlContent)
#Html.EditorFor(x => x.CustomMetaTitle)
#Html.EditorFor(x => x.CustomMetaDescription)
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Primary Image
</div>
<div class="panel-body">
#Html.EditorFor(x => x.PrimaryImageEditor)
</div>
</div>
#Html.Partial("_FormControls", "Save")
</div>
</form>
</div>
</div>
...where the only bit that changes is this, in the middle:
#Html.EditorFor(x => x.Title)
#Html.EditorFor(x => x.Slug)
#Html.EditorFor(x => x.OneLiner)
#Html.EditorFor(x => x.HtmlContent)
#Html.EditorFor(x => x.CustomMetaTitle)
#Html.EditorFor(x => x.CustomMetaDescription)
Is there a recommended way to standardise the surrounding layout for different models?
I don't think I can use a #helper because of the model typing and #Html.EditorFor content.
#RenderSection can only be called in the master layout and I don't want to create a new master view just for this.
The ViewModels all implement an interface, that I can use with PartialViews, but I'd like to make use of the DataAnnotations that I have on each specific ViewModel and I don't know how to do this.
I feel there may be an obvious way to do this that I am overlooking.

how to bring label and text box in one line in strongly typed view [duplicate]

This question already has answers here:
Label and text box on the same line using css
(4 answers)
Closed 5 years ago.
my label appears on top and below it input box is displayed i want both on the same line.
<fieldset>
<legend style="color:red">Enter Details</legend><br />
<div style="color:red">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field" style="color:InfoBackground">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div><br/>
<div class="editor-field" style="color:red">
#Html.LabelFor(model => model.Country)
</div>
<div class="editor-field" style="color: InfoBackground">
#Html.EditorFor(model => model.Country)
#Html.ValidationMessageFor(model => model.Country)
</div><br/>
<div class="editor-label" style="color:red">
#Html.LabelFor(model => model.Mobile_Number)
</div>
<div class="editor-field" style="color: InfoBackground">
#Html.EditorFor(model => model.Mobile_Number)
#Html.ValidationMessageFor(model => model.Mobile_Number)
</div><br/>
<div align="center"><input type=submit" value="submit" /></div>
</fieldset>
what changes must be done.Please help!!!
As you know that the Div's are by default display:block.So if you want to show you lable or input etc inline then update that div style .Apply the following style to your div to you want to show in line.
style="display:inline-block;"
You have you label wrapped in a div. Div's are default display:block. That means they forces a new line.
Easiest thing to do is to place your #Html.LabelFor and #Html.EditorFor inside the same div and change your css to get the effect you want.

Want to show masked input with current year after backslash in mvc view(razor)

Masking is working fine but I want to Auto generate year section by default like : 123-1234/(currentyear).
View.cshtml
<fieldset class="CreateEditfieldset Seconfieldset">
<div class="editor-label">
#Html.LabelFor(model => model.DONO)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DONO)
#Html.ValidationMessageFor(model => model.DONO) // format : 123-1234/2014
</div>
</fieldset>
<script type="text/javascript">
$("#DONO").mask("999-9999/9999");
</script>
It's editorfor Id is "DONO" and masking is working fine I repeat.
One possible (hack-ish) way is to do this on the server:
$("#DONO").mask("999-9999/#DateTime.Today.Year");

how to add menu on top of image in html

My code is in ASP.Net mvc4 . in this only label is coming not data.
<div class="display-label">
#Html.DisplayNameFor(model => model.Leader.Name)
</div>
<div class="display-field">
<!-- #Html.DisplayFor(model => model.Leader.Name) --->
#Html.DisplayFor(model => model.Leader.Name )
</div>
use Bootstrap responsive UI...
http://www.google.co.in/url?sa=t&rct=j&q=bootstrap&source=web&cd=4&cad=rja&ved=0CEUQjBAwAw&url=http%3A%2F%2Ftwitter.github.com%2Fbootstrap%2Fcomponents.html&ei=Zfn0ULnWN8btrAegsoHoCQ&usg=AFQjCNEGD-rO2TzedFvBGlLrxLrPVxbjQA&bvm=bv.41018144,d.bmk
you can use the following..
if you only want to display then use #Model.Leader.Name and if you want to allow user to change this value use #Html.TextBoxFor(
<div class="display-label">
#Html.DisplayNameFor(model => model.Leader.Name)
</div>
<div class="display-field">
#Model.Leader.Name
</div>
<div class="display-field">
#Html.TextBoxFor(model => model.Leader.Name)
</div>
Hope this helps !

Asp.Net MVC 3 Razor Rendering Bug?

This one is strange...I have the following markup for a view using Razor view engine ASP.Net MVC 3 RC
<p>
<div class="editor-label">
#Html.LabelFor(model => model.Client.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Client.FirstName) #Html.ValidationMessageFor(model => model.Client.FirstName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Client.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Client.LastName) #Html.ValidationMessageFor(model => model.Client.LastName)
</div>
</p>
The problem is that when it renders, the P tag is not surrounding the DIVs! It renders like this:
<p>
</p><div class="editor-label">
<label for="Client.FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The First Name field is required." id="Client_FirstName" name="Client.FirstName" value="My FName" type="text"> <span class="field-validation-valid" data-valmsg-for="Client.FirstName" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Client.LastName">Last Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The Last Name field is required." id="Client_LastName" name="Client.LastName" value="My LName" type="text"> <span class="field-validation-valid" data-valmsg-for="Client.LastName" data-valmsg-replace="true"></span>
</div>
What the heck is going on? Any help is appreciated!
a paragraph cannot contain other block level elements. w3c
also check out this question
Hmmm, it seems like it is just standard browser behavior?
http://blog.programmingsolution.net/html/html-div-tag-inside-html-p-paragraph-tag-does-not-work-correctly/
The P element represents a paragraph. It cannot contain block-level elements e.g. DIV

Resources