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>
Related
In my Application, In EDIT view I want to call data from the database and fill into the partial view that have sent through to the database when creates the request using same partial view . Currently my code I have written like below. But what happens is, If there is 4 records, It will generate 4 line, but there is no data there. All comes as empty.
<ul id="RequItms" style="list-style-type: none">
#if (Model != null && Model.GeneralItmsList != null)
{
foreach (var item in Model.GeneralItmsList)
{
Html.RenderAction("GeneralItmsPartialView", "AppRequests", Model.GeneralItmsList.ToList());
}
}
</ul>
Here is the view. This is the view I'm currently getting from the above code.
But this is the way it should load in that empty fields.
I have checked in the Model.GeneralItemsList There is shows the data, But I think when parsing it to the partial view must be the error occurs.
Here is the partial view code looks like.
#model Asp_PASMVC.Models.GeneralItms
#using Asp_PASMVC.Infrastructure
<li style="padding-bottom:15px">
#using (Html.BeginCollectionItem("GeneralItmsList"))
{
#Html.HiddenFor(model => model.TempID)
<div class="form-horizontal" id="quickForm" novalidate="novalidate">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="row">
<div class="col-md-5 col-sm-6">
<div class="form-group">
Select Item Description
<div class="col-md-10">
#Html.EditorFor(model => model.Attachment_Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Attachment_Description, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
Attachment Amount
<div class="col-md-10">
<div class="input-group-prepend">
<span class="input-group-text">Rs.</span>
#Html.EditorFor(model => model.Attachment_Amount, new { htmlAttributes = new { #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.Attachment_Amount, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
Attachment
<div class="col-md-10">
<input type="file" name="ImageData#(Model.TempID.ToString())" id="ImageData#(Model.TempID.ToString())" multiple="multiple" data-id="Img#(Model.TempID.ToString())" onchange="checkImage(this)" />
#Html.ValidationMessageFor(model => model.Attachment, "", new { #class = "text-danger" })
</div>
</div>
<img id="Img#(Model.TempID.ToString())" src="" alt="" width="100" height="100" class="ml-1" />
</div>
<button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Remove</button>
</div>
</div>
}
</li>
I hope that I have explained this question properly. Thanks for the support.
I have the following form built using HTML Razor Syntax. I have 3 textboxes horizontally aligned in a single row. The third textbox needs to have a button right beside it. However, the button goes below the textbox. I don't know how to put it beside the textbox.
Here's the HTML code:
#using (Html.BeginForm("Save", "Import", FormMethod.Post, new { id = "import" }))
{
<div class="form-group col-xs-4">
#Html.LabelFor(m => m.CustomerId)
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></span>
#Html.DropDownListFor(m => m.CustomerId, Model.Customers, new { #class = "form-control", #id = "customer" })
</div>
</div>
<div class="form-group col-xs-4">
#Html.LabelFor(m => m.Order.OrderName, "Order Name")
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></span>
#Html.TextBoxFor(m => m.Order.OrderName, new { #class = "form-control", data_rule_validOrder = "true", #id = "order" })
</div>
#Html.ValidationMessageFor(m => m.Order.OrderName)
</div>
<div class="form-group col-xs-4">
#Html.LabelFor(m => m.Product.description, "Product")
<div class="tt-container input-group">
<span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
#Html.TextBoxFor(m => m.Product.description, new { #class = "form-control", data_rule_validProduct = "true", #id = "product" })
</div>
<span><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
#Html.ValidationMessageFor(m => m.Product.description)
</div>
Here's how the textboxes are aligned:
I want the "ADD" button to show beside the textbox.
ATTEMPTS: BASED ON DREAMTEK'S ANSWER:
<div class="form-group col-xs-4" style="margin-top:20px">
#Html.LabelFor(m => m.Product.description, "Product")
<div class="tt-container input-group d-inline-flex">
<span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
#Html.TextBoxFor(m => m.Product.description, new { #class = "form-control", data_rule_validProduct = "true", #id = "product" })
<span class="input-group-btn"><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
</div>
#Html.ValidationMessageFor(m => m.Product.description)
</div>
I get like this:
To demonstrate I am showing the markup in this example:
Move the button inside the local tt-container.
Add class d-inline-flex to the button.
Add class col (flex:1) to each item you wish to stretch.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-xs-4">
Product
<div class="tt-container input-group d-inline-flex">
<span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
<input type="text" id="product" class="form-control col" />
<span><button type="button" id="addRow" class="btn btn-primary col">ADD</button></span>
</div>
</div>
You just have to:
Add input-group to your outer div
Add input-group-btn to your span of button, like this:
Like this:
//...
<div class="form-group input-group col-xs-4">
#Html.LabelFor(m => m.Product.description, "Product")
<div class="tt-container input-group">
<span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
#Html.TextBoxFor(m => m.Product.description, new { #class = "form-control", data_rule_validProduct = "true", #id = "product" })
</div>
<span class="input-group-btn"><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
#Html.ValidationMessageFor(m => m.Product.description)
</div>
I have this implementation for bootstrap modal with jquery. However, there are parts not showing when i do inspect element. Here is the code.
<div class="col-md-9 filter-header">
<i class="fa fa-plus fa-fws"></i> Add Role
</div>
Below, I have these to where the data to be put in.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="C2T Modal">
<div class="modal-dialog">
<div class="modal-content">
<!--Content Inside Here-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
I have jquery implementation to add the data.
$('.Roles')
.on('click', 'a[data-toggle="modal"]', function () { // show modal
$('.modal-content').load($(this).attr('href'));
})
.on('submit', '.ajaxForm', ajaxFormSubmit);
Here is the code to be put in the modal-content after calling the controller
#model C2T.Models.RoleViewModel
#{
ViewBag.Title = "Create Role";
Layout = null;
}
<div class="modalForm ">
#using (Html.BeginForm("CreateRole", "Admin", FormMethod.Post, new { #class = "ajaxForm", data_target = ".modalForm" }))
{
#Html.AntiForgeryToken()
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-user-plus fa-fw"></i> New Role</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-sm-3" })
<div class="col-sm-9">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control input-sm" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label col-sm-3" })
<div class="col-sm-9">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control input-sm" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<span class="spinner pull-left"></span>
<input type="button" value="Cancel" class="btn btn-default" data-dismiss="modal" />
<input type="submit" value="Create" class="btn btn-primary" />
</div>
}
</div>
The Roles is the body class and I am sure that when I click the modal the jquery codes were triggered. For some reason, it does display the data and the modal but the UI is not working. This is how it looks like.
I have inspect element also and this is the result, 'modal-dialog' and 'modal-content' class were not included.
Does anyone has an idea how to fix this issue? Thanks in advance.
Follow the hierarchy of div's to construct modals as recommended by bootstrap so that the styles are applied correctly. Currently, you have modalForm that encloses modal-content. Move your custom code inside modal-body for the styles to be applied correctly. In the snippet below, insert your custom code inside the modal-body div.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="C2T Modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- INSERT CUSTOM CODE HERE -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
I'm trying to submit my form using Ajax.beginform. I tried everything but i am getting this resource cannot found error.
I have two models - PatientEligibility and PatientDetails. Both contains 10-12 properties respectively.
I have created on viewmodel using those two models and I am trying to use some of the properties in one partial view and submitting that data button click
my view -
#model Portal.Models.EligibilityViewModel
<script type="text/javascript">
$(document).ready(function () {
$('input[type="checkbox"]').on('change', function () {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
});
</script>
<div class="row margin-top-0">
<div class="col-xs-12 col-sm-12">
<h4><b>Patient Eligibility</b></h4>
</div>
</div>
#using (Ajax.BeginForm("SubmitPatientEligibility", "Ophthalmic", new AjaxOptions { OnSuccess = "OnSuccess", OnFailure = "OnFailure" }))
{
<div class="row margin-top-10">
<div class="col-xs-12 col-sm-12">
<div class="margin-top-10">
<div class="checkbox">
<label>
#Html.CheckBoxFor(model => model.PatientEligibility.IsAboveSixty, new { #Name = "cbAgeEligibility", htmlAttributes = new { id = "cbAbvSixty", #class = "form-control", Name = "group1[]" } })
The patient is 60 or over
</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="margin-top-10">
<div class="checkbox">
<label>
#Html.CheckBoxFor(model => model.PatientEligibility.IsBelowSixteen, new { #Name = "cbAgeEligibility", htmlAttributes = new { id = "cbUnderSixteen", #class = "form-control", Name = "group1[]" } })
The patient is under 16
</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="margin-top-10">
<div class="checkbox">
<label>
#Html.CheckBoxFor(model => model.PatientEligibility.IsBetweenForty, new { #Name = "cbAgeEligibility", htmlAttributes = new { id = "cbAbovenForty", #class = "form-control", Name = "group1[]" } })
The patient is 40 or over and is the parent/brother/sister/child of a person who has or has had gloucoma
</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="margin-top-10">
<div class="checkbox">
<label>
#Html.CheckBoxFor(model => model.PatientEligibility.IsStudent, new { #Name = "cbAgeEligibility", htmlAttributes = new { id = "cbStudent", #class = "form-control", Name = "group1[]" } })
The patient is full time student aged 16, 17 or 18 at the establishment below.
</label>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="margin-top-10">
<div class="checkbox">
<label>
#Html.CheckBoxFor(model => model.PatientEligibility.IsPrisoner, new { data_toggle = "collapse", data_target = "#dvseenNotseen", htmlAttributes = new { id = "cbPrisoner", #class = "form-control" } })
The patient is prisoner on leave from the prison detailed below
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="margin-top-10">
#Html.LabelFor(p => p.PatientBenefit.NINNumber)
#Html.EditorFor(model => model.PatientBenefit.NINNumber, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="margin-top-10">
<label>DATE OF BIRTH</label>
#Html.TextBoxFor(model => model.PatientBenefit.DOB, new { #class = "form-control", autocomplete = "off", #id = "datetimepicker1" })
</div>
</div>
<div class="row margin-top-10">
<div class="col-xs-12 col-sm-3">
<button class="btn btn-default" name="btnBack">Previous</button>
</div>
<div class="col-xs-12 col-sm-9 text-right">
<button class="btn btn-default" name="btnBack">Save Draft</button>
<button class="btn btn-success fa fa-chevron-right icon-right" name="btnNext" type="submit">Next</button>
</div>
</div>
}
and my model is like this -
public class EligibilityViewModel
{
public PatientEligibility PatientEligibility { get; set; }
public PatientBenefit PatientBenefit { get; set; }
}
I am trying to call this method on submit of Next button -
public class OphthalmicController : Controller
{
[HttpPost]
public ActionResult SubmitPatientEligibility(EligibilityViewModel model)
{
return null;
}
}
i dont know why but i am getting this 500 error resource cannot found for this method.
What am I missing here?
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>