Styling Kendo Window's content with Bootstrap

Styling Kendo Window's content with Bootstrap - c#

I have a generic Kendo Window that I call for different partial views. I can't style contents using bootstrap, as it causes different layouts in different browsers and elements are always cluttered.
This is a sample:
<div class="form-group form-inline">
<div class="line">
<div class="col-xs-6">
#Html.LabelFor(m => m.2, new { #class = "col-xs-4 control-label" })
#Html.DisplayFor(m => m.2)
</div>
<div class="col-xs-4">
#Html.LabelFor(m => m.3, new { #class = "col-xs-4 control-label" })
#Html.DisplayFor(m => m.3)
</div>
</div>
<div class="line">
<div class="col-xs-6">
#Html.LabelFor(m => m.4, new { #class = "col-xs-4 control-label" })
#Html.DisplayFor(m => m.4)
</div>
<div class="col-xs-4">
#Html.LabelFor(m => m.5, new { #class = "col-xs-4 control-label" })
#Html.DisplayFor(m => m.5)
</div>
</div>
</div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
#(Html.Kendo().Grid<Class...>()
....
And line:
.line{
line-height: 20px;
}
Am I missing something? I just want to have a 2-column layout. Can you give me an example please?

I don't know why, but I should use col-xs-5. Also, to keep elements inside a tab strip I have to put them inside a container.
<div class="container-fluid">
<div class="form-group form-inline col-xs-12">
<div class="col-xs-5"></div>
<div class="col-xs-5"></div>
</div>
<div class="form-group form-inline col-xs-12">
<div class="col-xs-5"></div>
<div class="col-xs-5"></div>
</div>
......
</div>
UPDATE
I found the solution at their documents.
First you need to add the following references.
<link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.bootstrap.min.css">
And then add the following CSS to your site.css and include it in the page:
/* reset everything to the default box model */
*, :before, :after
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* set a border-box model only to elements that need it */
.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And everything works fine, you should be able to use the following:
<div class="container-fluid">
<div class="form-group form-inline col-xs-12">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="form-group form-inline col-xs-12">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
......
</div>

You'll probably need something like this. Play with the column widths depending on your labels.
<div class="form-group form-inline">
<div class="col-xs-6">
#Html.LabelFor(m => m.2, new { #class = "control-label" })
</div>
<div class="col-xs-6">
#Html.DisplayFor(m => m.2)
</div>
</div>
<div class="form-group form-inline">
<div class="col-xs-6">
#Html.LabelFor(m => m.3, new { #class = "control-label" })
</div>
<div class="col-xs-6">
#Html.DisplayFor(m => m.3)
</div>
</div>
<div class="form-group form-inline">
<div class="col-xs-6">
#Html.LabelFor(m => m.4, new { #class = "control-label" })
</div>
<div class="col-xs-6">
#Html.DisplayFor(m => m.4)
</div>
</div>
<div class="form-group form-inline">
<div class="col-xs-6">
#Html.LabelFor(m => m.5, new { #class = "control-label" })
</div>
<div class="col-xs-6">
#Html.DisplayFor(m => m.5)
</div>
</div>

Related

ASP.NET HTML - Textboxes are extremely close together and need help putting space in between them

#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<h4>Send your comments.</h4>
<hr />
<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="clearfix"></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="clearfix"></div>
<div class="form-group">
#Html.LabelFor(m => m.Message, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Message, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Send" />
</div>
</div>
}
I have tried using clearfix, as well as modifying the css margins in form-group. If anyone has any suggestions, feel free. Program works perfectly, just the formatting that is off.

You seem to be using clearfix in the wrong place?
Just add it along side form-group
<div class="form-group clearfix">

Try either one will solve the problem.
Add the class form-horizontal to the form
or
Add the class row to the <div class="form-group">

Nop Commerce RenderBootstrapTabHeader Submit

I have the following code in a custom plugin in NopCommerce v3.8.
#using Nop.Web.Framework;
#using Nop.Core;
#using System.Linq;
#using Nop.Web.Framework.UI;
#using Nop.Web.Framework;
#using Nop.Core.Infrastructure;
#model Nop.Plugin.Widgets.PromoSlider.Domain.PromoSliderRecord
#{ Layout = "_AdminLayout.cshtml"; }
<div class="content">
<div class="form-horizontal">
<div id="slider-edit" class="nav-tabs-custom">
<ul class="nav nav-tabs">
#Html.RenderBootstrapTabHeader("Slider", #T("Slider"), true)
#Html.RenderBootstrapTabHeader("Images", #T("Images"))
</ul>
<div class="tab-content">
#Html.RenderBootstrapTabContent("Slider", Sliders(), true)
#Html.RenderBootstrapTabContent("Images", Images(), false)
</div>
</div>
</div>
</div>
#helper Sliders()
{
using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<div>
<div class="adminData">#Html.HiddenFor(m => m.PromoSliderId)</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.PromoSliderName)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.PromoSliderName)
#Html.ValidationMessageFor(m => m.PromoSliderName)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.IsActive) </div>
<div class="col-md-9">
#Html.EditorFor(m => m.IsActive)
#Html.ValidationMessageFor(m => m.IsActive)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.Interval)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.Interval)
#Html.ValidationMessageFor(m => m.Interval)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.Wrap)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.Wrap)
#Html.ValidationMessageFor(m => m.Wrap)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.PauseOnHover)</div>
<div class="col-md-9">
#Html.EditorFor(m => m.PauseOnHover)
#Html.ValidationMessageFor(m => m.PauseOnHover)
</div>
</div>
<div class="form-group">
<div class="col-md-2">#Html.NopLabelFor(m => m.ZoneName)</div>
<div class="col-md-9">
#Html.DropDownListFor(m => m.ZoneName, new SelectList(
new List<string>() {
"producdivetails_top",
"categorydetails_after_breadcrumb",
"home_page_top"
}))
#Html.ValidationMessageFor(m => m.ZoneName)
</div>
</div>
<div class="pull-right">
<button type="submit" name="save" class="btn bg-blue">
<i class="fa fa-floppy-o"></i>
#T("DERP")
</button>
</div>
</div>
</div>
</div>
}
}
#helper Images()
{
if (Model.PromoSliderId > 0)
{
#Html.Action("ManagePromoImages", new { PromoSliderId = Model.PromoSliderId })
}
else
{
<p>Please create and save a slider first.</p>
}
}
Submit button doesnt fire at all, reason can be found by looking at the generated source.
<div class="content">
<div class="form-horizontal">
<div id="slider-edit" class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a data-tab-name="Slider" data-toggle="tab" href="#Slider">slider</a></li>
<li class=""><a data-tab-name="Images" data-toggle="tab" href="#Images">images</a></li>
</ul>
<div class="tab-content">
<form action="/PromoSlider/CreateUpdatePromoSlider" method="post"></form><div class="tab-pane active" id="Slider"><input name="__RequestVerificationToken" type="hidden" value="uH2GbG4t6n0dDyBs79d6GQZTorBRpgWFCFithR77gSkAUYvPkMecNIwYtkEGyayid97gmdQp-isUUkMq1M7qSpeYOzwLGW-9WtUIxggkBd-0gATnIt5CvfEtUpjqwnl90" /> <div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<div>....
As you can see for some mad reason it decideds to create the form, then close it and input all the #helper html code including the submit button, after the form.
My question, Can you still use
#Html.BeginForm
inside of the
#Html.RenderBootstrapTabHeader
Really would like to get this working in 3.8 thanks.

The only way which I can offer now is to use <form></form> tag with required parameters to create a form inside #helper {}.
We have created an appropriate issue to investigate this problem:
https://github.com/nopSolutions/nopCommerce/issues/1840

mvc edit return value but db doesnt update

i have mvc project to register new student and give him courses and degree,etc, as shown in the database(i use entity framework) database of the project
. the edit view code is :
#model IList<HighStudy.Models.Grade>
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" align="center">Student Info</h3>
</div>
<div class="panel-body">
<div class="col-lg-4">
<p>Name: #Html.DisplayFor(model => model[0].Student.Name)</p>
<p>Level: #Html.DisplayFor(model => model[0].Student.Level)</p>
</div>
<div class="col-lg-4">
<p>Department: #Html.DisplayFor(model => model[0].Student.Department)</p>
<p>Study Type: #Html.DisplayFor(model => model[0].Student.StudyType)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" align="center">Course 1</h3>
</div>
<div class="panel-body">
<ul class="list-group">
#for (var i = 0; i < Model.Count; i++)
{
if (Model[i].CourseNumber == 1)
{
if (Model[i].Mark == "A" || Model[i].Mark == "B")
{
<li class="list-group-item list-group-item-success">
<div class="row">
<div class="col-lg-8">
#Model[i].Cours.Course_Title
#Html.TextBoxFor(model => Model[i].Cours.Course_Title, new { style = "width:50%" })
#Html.ValidationMessageFor(model => Model[i].Cours.Course_Title)
</div>
<div class="col-lg-2">
#Model[i].Grade1
#Html.TextBoxFor(model => Model[i].Grade1, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Grade1)
</div>
<div class="col-lg-2">
#Model[i].Mark
#Html.TextBoxFor(model => Model[i].Mark, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Mark)
</div>
</div>
</li>
}
else
{
<li class="list-group-item list-group-item-danger">
<div class="row">
<div class="row">
<div class="col-lg-8">
#Model[i].Cours.Course_Title
#Html.TextBoxFor(model => Model[i].Cours.Course_Title, new { style = "width:50%" })
#Html.ValidationMessageFor(model => Model[i].Cours.Course_Title)
</div>
<div class="col-lg-2">
#Model[i].Grade1
#Html.TextBoxFor(model => Model[i].Grade1, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Grade1)
</div>
<div class="col-lg-2">
#Model[i].Mark
#Html.TextBoxFor(model => Model[i].Mark, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Mark)
</div>
</div>
</div>
</li>
}
}
}
</ul>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" align="center">Course 2</h3>
</div>
<div class="panel-body">
<ul class="list-group">
#for (var i = 0; i < Model.Count; i++)
{
if (Model[i].CourseNumber == 2)
{
if (Model[i].Mark == "A" || Model[i].Mark == "B")
{
<li class="list-group-item list-group-item-success">
<div class="row">
<div class="col-lg-8">
#Model[i].Cours.Course_Title
#Html.TextBoxFor(model => Model[i].Cours.Course_Title, new { style = "width:50%" })
#Html.ValidationMessageFor(model => Model[i].Cours.Course_Title)
</div>
<div class="col-lg-2">
#Model[i].Grade1
#Html.TextBoxFor(model => Model[i].Grade1, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Grade1)
</div>
<div class="col-lg-2">
#Model[i].Mark
#Html.TextBoxFor(model => Model[i].Mark, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Mark)
</div>
</div>
</li>
}
else
{
<li class="list-group-item list-group-item-danger">
<div class="row">
<div class="col-lg-8">
#Model[i].Cours.Course_Title
#Html.TextBoxFor(model => Model[i].Cours.Course_Title, new { style = "width:50%" })
#Html.ValidationMessageFor(model => Model[i].Cours.Course_Title)
</div>
<div class="col-lg-2">
#Model[i].Grade1
#Html.TextBoxFor(model => Model[i].Grade1, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Grade1)
</div>
<div class="col-lg-2">
#Model[i].Mark
#Html.TextBoxFor(model => Model[i].Mark, new { style = "width:30px" })
#Html.ValidationMessageFor(model => Model[i].Mark)
</div>
</div>
</li>
}
}
}
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="Save" class="btn btn-default" />
</div>
}
<div class="col-lg-offset-0">
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
and in the controller code for the edit view is :
edit view code in the controller
. when it reach db.Entry(g).State = System.Data.Entity.EntityState.Modified;
it goes to catch block!!
any help will be useful, thanks in advance.

I believe you should iterate over your collection to add each object to the context, and set it to Modified.
foreach(grade in g)
{
db.Entry(grade).State = EntityState.Modified;
}
db.SaveChanges();
You must do SaveChanges outside the foreach statement

db.Entry(g).State = System.Data.Entity.EntityState.Modified;
In the above code you are getting g from another object, you need to originate it from the same db object which you are using to change the State
another things could be the list, I think state of List can't be modified altogether.
consider doing something like this
foreach (var item in g)
{
db.Set<Grade>().Attach(item);
db.Entry<Grade>(item).State = EntityState.Modified;
db.Configuration.ValidateOnSaveEnabled = false;
}
db.SaveChanges();
Recently gone through the same error, and foreach saved my life. Not sure if its a very clean way to do it.

SOLVED
my current exception was :
( Unable to update the EntitySet - because it has a DefiningQuery and no element exists in the element to support the current operation
steps that solve it :
delete all duplicate #html.hiddenfor(model=> model.StudentID) in the edit view
Right click on .edmx file and chose open with xml editor
search for DefiningQuery and Remove it, yes Remove it
search for ( store:Schema="dbo" ) and rename it to ( Schema="dbo" )
these were the steps that saved my life, thank you all my friends for help, i really appreciate your help

MVC Closing Tags error

Could anybody spot what's causing this to produce " The using block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup." ?
<div class="tabContentHolder">
#using (Html.BeginForm("SaveProcurement", "FMR", FormMethod.Post, new { id = "formSaveProcurement", enctype = "multipart/form-data" }))
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div class="btnContainer">
#if (User.IsInRole("Coordinator") || User.IsInRole("Administrator"))
{
Save Changes
#Html.HiddenFor(x => x.FMRID);
}
</div>
<div class="tabContentTitle">Notice of Award and Notice to Proceed</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.IssueDateNAward)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.IssueDateNAward)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.NAAmount)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.NAAmount)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.NAContractId)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.NAContractId)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.IssueDateNProceed)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.IssueDateNProceed)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.NPIssuedBy)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.NPIssuedBy)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.NPDesgination)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.NPDesgination)</div>
</div>
<div class="tabContentTitle">Contract</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.ContractorName)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.ContractorName)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.ContractorRepresentative)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.ContractorRepresentative)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.ContractorAddress)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.ContractorAddress)</div>
</div>
<div class="tabContentTitle">Admin</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.LGUName)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.LGUName)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.LGURepresentative)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.LGURepresentative)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.LGUAddress)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.LGUAddress)</div>
</div>
<div class="tabContentTitle">Dimensions</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.FMRLength)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.FMRLength)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.RoadbedWidth)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.RoadbedWidth)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.PavementWidth)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.PavementWidth)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.PavementThickness)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.PavementThickness)</div>
</div>
<div class="tabContentTitle">Coordinates</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.StartLatitude)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.StartLatitude)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.EndLatitude)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.EndLatitude)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.StartLongitude)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.StartLongitude)</div>
</div>
<div class="itemHolder">
<div class="itemTitle">#Html.DisplayNameFor(x => x.EndLongitude)</div>
<div class="itemValue">#Html.TextBoxFor(x => x.EndLongitude)</div>
</div>
<div class="tabContentTitle">Scope of Work</div>
#foreach(var item in Model.ScopeOfWork){
<div class="itemHolder">
<div class="itemTitle"><label>#item.ScopeText</label></div>
<div class="itemValue">Quantity: <label>#item.Quantity</label> Cost: <label>#item.Cost</label></div>
</div>
}
}
</div>

The only error I can see (resharper can see on my local recreation of your Razor syntax) is with your #foreach
Once you're inside a code block (which in this case you are, because of your #using you don't need to use # any more)
Try changing your #foreach to
foreach (var item in Model.ScopeOfWork)
{
<div class="itemHolder">
<div class="itemTitle"><label>#item.ScopeText</label></div>
<div class="itemValue">Quantity: <label>#item.Quantity</label> Cost: <label>#item.Cost</label></div>
</div>
}

Make Label and Checkbox closer together in razor view

I have a label and a checkbox in my view that I would like next to each other. However, as you can see in this picture I cannot get them any closer.
Here is my view code:
#using (Html.BeginForm("AddTechNote", "Ticket", FormMethod.Post)) { #Html.AntiForgeryToken()
<div class="form-group">
#Html.HiddenFor(model => model.TicketId)
<div class="col-md-12 col-xs-12">
<div class="col-md-3">
#Html.Label("New Note", new { #class = "control-label" })
</div>
<div class="col-md-1" style="text-align: right">
#Html.Label("Public", new { #class = "control-label" })
</div>
<div class="col-md-1">
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</div>
</div>
<div class="col-md-12 col-xs-12">
#Html.TextArea("Note", new { cols = 600, #rows = 5 })
</div>
<div class="form-group">
<div class="col-md-2">
<input type="submit" value="Add" class="btn btn-default" />
</div>
#*<div class="col-md-1 col-lg-offset-1">
</div>
*#
</div>
</div>
}
Jesus,
This is what I get with the code you provided. Thank you for your help so far.

You can do following:
Use only one div for both label and checkbox like:
<div class="col-md-1" style="text-align: right">
#Html.Label("Public", new { #class = "control-label" })
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</div>
The label need to wrap the input.

You need to change your Razor view, something like this:
<div class="#Model.ControlDimension">
<div class="checkbox #Model.CheckBoxDivClasses">
<label for="#Model.ControlName">#Html.Raw(Model.Label)#Model.ControlFor</label>
#Model.ValidationMessageFor
</div>
</div>
The control needs to be inside the label element.
In your case, I think ...:
<div class="col-md-2">
<div class="checkbox">
<label for="PublicNote">
Public
#Html.CheckBox("PublicNote", new { #class = "chk=style", #checked = "checked" })
</label>
</div>
</div>

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Styling Kendo Window's content with Bootstrap - c#

Related

ASP.NET HTML - Textboxes are extremely close together and need help putting space in between them

Nop Commerce RenderBootstrapTabHeader Submit

mvc edit return value but db doesnt update

MVC Closing Tags error

Make Label and Checkbox closer together in razor view

Categories

Resources