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
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.
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.
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");
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 !
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