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>
Related
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 want the remove button to appear in the right hand side of browse button. Currently what is happening that is remove button is appearing under.
Please see my code below:
<div class="filediv col-md-12">
<!-- <i class="fa fa-upload" aria-hidden="true"></i>-->
#Html.LabelFor(model => model.UploadFile, "Supporting file upload", new { #style = "", #class = "" })
<p class="form-text text-muted">
File upload restrictions are as follows:</p>
<ul>
<li>Do not upload any personal/confidential information</li>
<li>File size: #Model.GetBytesasText() MB </li>
<li>Format: #allowedFileTypes </li>
</ul>
#Html.TextBoxFor(model => model.File, new { #style = "width: 300px;", #class = "form-control", #type = "file", id = "upload" })
<!--<input type="submit" name="submit" value="Upload" />-->
<div class="col-md-3 removebuttonone">
<input type="button" value="Remove" class="btn btn-danger" />
</div>
#Html.ValidationMessageFor(model => model.UploadFile)
</div>
<div id="Uploadsecfile" class="filediv uploadsecfile col-md-12" style="display:none">
<!-- <i class="fa fa-upload" aria-hidden="true"></i>-->
#Html.LabelFor(model => model.UploadFile, "", new { #style = "", #class = "" })
#Html.TextBoxFor(model => model.File, new { #style = "width: 300px;", #class = "form-control", #type = "file", id = "" })
<!--<input type="submit" name="submit" value="Upload" />-->
<div class="col-md-3 removebuttonone">
<input type="button" value="Remove" class="btn btn-danger" />
</div>
#Html.ValidationMessageFor(model => model.UploadFile)
</div>
You have 3 CSS options:
Make the Browse and Remove buttons display:inline-block
Make for Remove button float:right. And add <div style='clear:both'></div> after.
Create a table <table><tr><td>**Browse button**</td><td>**Remove button**</td></tr></table>
Hope it will help
You have already given form-control class to text-box. Which will occupy full with of div. so your button will be pushed to next line. you need to divide row into two different section like this
<div class="filediv col-md-12">
<div class = "row">
<div class = "col-md-9">
<!-- <i class="fa fa-upload" aria-hidden="true"></i>-->
#Html.LabelFor(model => model.UploadFile, "Supporting file upload", new { #style = "", #class = "" })
<p class="form-text text-muted">
File upload restrictions are as follows:</p>
<ul>
<li>Do not upload any personal/confidential information</li>
<li>File size: #Model.GetBytesasText() MB </li>
<li>Format: #allowedFileTypes </li>
</ul>
#Html.TextBoxFor(model => model.File, new { #style = "width: 300px;", #class = "form-control", #type = "file", id = "upload" })
#Html.ValidationMessageFor(model => model.UploadFile)
</div>
<div class="col-md-3 removebuttonone">
<input type="button" value="Remove" class="btn btn-danger" />
</div>
</div>
</div>
Codepen Link : http://codepen.io/anon/pen/XjVNwz
You can try below code, I can see you are using BootStrap at your page. In bootstrap you can use simply a class name for floating right pull-right.
Please refer below code:
<div class="row">
<div class="col-md-12">
<div class="filediv col-md-6">
<!-- <i class="fa fa-upload" aria-hidden="true"></i>-->
#Html.LabelFor(model => model.UploadFile, "Supporting file upload", new { #style = "", #class = "" })
<p class="form-text text-muted">
File upload restrictions are as follows:
</p>
<ul>
<li>Do not upload any personal/confidential information</li>
<li>File size: #Model.GetBytesasText() MB </li>
<li>Format: #allowedFileTypes </li>
</ul>
#Html.TextBoxFor(model => model.File, new { #style = "width: 300px;", #class = "form-control", #type = "file", id = "upload" })
<!--<input type="submit" name="submit" value="Upload" />-->
<div class="col-md-3 removebuttonone">
<input type="button" value="Remove" class="btn btn-danger" />
</div>
#Html.ValidationMessageFor(model => model.UploadFile)
</div>
<!-- Button Div -->
<div id="Uploadsecfile" class="filediv uploadsecfile col-md-6 pull-right" style="display:none">
<!-- <i class="fa fa-upload" aria-hidden="true"></i>-->
#Html.LabelFor(model => model.UploadFile, "", new { #style = "", #class = "" })
#Html.TextBoxFor(model => model.File, new { #style = "width: 300px;", #class = "form-control", #type = "file", id = "" })
<!--<input type="submit" name="submit" value="Upload" />-->
<div class="col-md-3 removebuttonone">
<input type="button" value="Remove" class="btn btn-danger" />
</div>
#Html.ValidationMessageFor(model => model.UploadFile)
</div>
</div>
</div>
Hope it will solve your problem.
Thanks
I have project in which there is a form to edit user details. Initially it is disabled but when user search particular user and click edit button everything is enabled. I capture all changed data except dropdown list newly selected value. when user changed data and submit form. on the server end model property for dropdownlist contains old value in place new changed value.
Please help me
<script>
function Validate(strDecision) {
//alert("Validate");
debugger;
if (strDecision == "EDIT") {
if ($("#MerchDispName").val() == "" || $("#MerchDispName").val() == null) {
$("#DivInfoNErrorMsg").addClass("alert-danger");
$("#DivInfoNErrorMsg").html("<span>There is no data for editing.</span>");
$("#DivInfoNErrorMsg").show();
return false;
}
else {
debugger;
$(".ReadOnly").removeAttr("readOnly", "readOnly");
$(".Disabled").removeAttr("disabled", "disabled");
$("#Update").show();
$("#Edit").hide();
GetDetails();
}
}
else
{
var bFlag = false;
var iLengthPaymentMode = '#Model.dicPaymentModeVal.Count';
var iLengthProgramType = '#Model.dicProgramTypeVal.Count';
var i = 1;
for (; i <= iLengthPaymentMode; ) {
if ($("#PaymentCB" + i).is(":checked")) {
$("#PaymentCB" + i + "hid").val($("#PaymentCB" + i).val());
bFlag = true;
}
i++;
}
if (bFlag == false) {
$("#PaymentCBmsg").html("<span style='color:Red'>*Please select at least one payment option.</span>");
ShowErrorMsg("Please select at least one payment option.");
$("#PaymentCBmsg").show();
return false;
}
for (; i <= iLengthProgramType; ) {
if ($("#ProgramCB" + i).is(":checked")) {
$("#ProgramCB" + i + "hid").val($("#ProgramCB" + i).val());
bFlag = true;
}
i++;
}
if (bFlag == false) {
$("#ProgramCBmsg").html("<span style='color:Red'>*Please select at least one program type.</span>");
ShowErrorMsg("Please select at least one program type.");
$("#ProgramCBmsg").show();
return false;
}
else {
$(".Disabled").attr("disabled", "disabled");
$(".ReadOnly").attr("readOnly", "readOnly");
$("#Edit").show();
$("#Update").hide();
$("#frmMerchantEDIT").submit();
}
}
}
$(document).ready(function () {
//debugger;
var bFlagErrorMessage = '#Model.FlagErrorMessage';
var bFlagInfoMessage = '#Model.FlagInfoMessage';
$('#CountryList').on('change', function () {
debugger;
var id = this.value;
//$("#CountryID").val('0');
$("#CountryID").val(id); // or $(this).val()
});
$('#StateList').on('change', function () {
debugger;
var id = this.value;
//$("#StatesID").val('0');
$("#StatesID").val(id);
alert(id); // or $(this).val()
});
$('#CityList').on('change', function () {
debugger;
var id = this.value;
//$("#CityID").val('0');
$("#CityID").val(id);
//alert(this.value); // or $(this).val()
});
if (bFlagErrorMessage == 'True') {
debugger;
var sErrorMsg = '#Model.ErrorMessage';
$("#DivInfoNErrorMsg").addClass("alert-danger");
$("#DivInfoNErrorMsg").html("<span>" + sErrorMsg + "</span>");
$("#DivInfoNErrorMsg").show();
$(".ReadOnly").removeAttr("readOnly", "readOnly");
$(".Disabled").removeAttr("disabled", "disabled");
$("#Update").show();
$("#Edit").hide();
}
if (bFlagInfoMessage == 'True') {
debugger;
var sErrorMsg = '#Model.InfoMessage';
$("#DivInfoNErrorMsg").addClass("alert-success");
$("#DivInfoNErrorMsg").html("<span>" + sErrorMsg + "</span>");
$("#DivInfoNErrorMsg").show();
}
});
</script>
#using (Html.BeginForm("EDIT_MERCHANT", "MERCHANT_Permission", FormMethod.Post, new { #id = "frmMerchantEDIT", #class = "form-horizontal", #Role = "form" }))
{
#Html.AntiForgeryToken()
//#Html.ValidationSummary()
<div class="logmain_mechant">
<fieldset>
<legend class="panel-heading panel-primary" style="font-size:140%">Edit Merchant</legend>
<div id="DivInfoNErrorMsg" class="alert" hidden="hidden"></div>
<div class="wrapper">
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<a class="accordion-toggle" style="text-decoration:none" data-toggle="collapse"
data-parent="#accordion" href="#collapseOne">
<h2 class="panel-title" style="color:White;font-size:135%">
Personal
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="form-group">
<label for="MerchantName" class="control-label col-xs-8 col-sm-6 col-md-4">Merchant Name<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.MerchantName, new { #id = "MerchantName", #class = "form-control ReadOnly",#onclick= "ErrorDivHide()" })
#Html.ValidationMessageFor(m => m.MerchantName)
</div>
</div>
<div class="form-group">
<label for="MerchDispName" class="control-label col-xs-8 col-sm-6 col-md-4">Merchant Display Name<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.MerchantDisplayName, new { #id = "MerchDispName", #class = "form-control", #onclick="hideme()",#placeholder="Merchant Display Name" })
#Html.ValidationMessageFor(m => m.MerchantDisplayName)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">Address1<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.Address1, new { #id = "Address1", #class = "form-control ReadOnly", #onclick = "ErrorDivHide()" })
#Html.ValidationMessageFor(m => m.Address1)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col- md-4">Address2:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.Address2, new { #id = "Address2", #class = "form-control ReadOnly", #onclick = "ErrorDivHide()" })
#Html.ValidationMessageFor(m => m.Address2)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">Address3:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.Address3, new { #id = "Address3", #class = "form-control ReadOnly", #onclick = "ErrorDivHide()" })
#Html.ValidationMessageFor(m => m.Address3)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">Country<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.DropDownListFor(m => m.CountryID, Model.liCountry, new { #id = "CountryList", #class = "form-control Disabled", #onchange = "GetStates()", #onclick = "ErrorDivHide()" })
#Html.HiddenFor(m => m.CountryID, new { #id="CountryId" })
#*#Html.TextBoxFor(m => m.CountryName, new { #id = "CountryName", #calss = "form-control" })*#
#Html.ValidationMessageFor(m => m.CountryID)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">State<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.DropDownListFor(m => m.StateID, Model.liState, new { #id = "StateList", #class = "form-control Disabled", #onchange = "GetCitis()", #onclick = "ErrorDivHide()" })
#Html.HiddenFor(m => m.StateID, new { #id = "StateIds" })
#*#Html.TextBoxFor(m => m.CountryName, new { #id = "CountryName", #calss = "form-control" })*#
#Html.ValidationMessageFor(m => m.StateName)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">City<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.DropDownListFor(m => m.CityID, Model.liCity, new { #id = "CityList", #class = "form-control Disabled", #onclick = "ErrorDivHide()" })
#Html.HiddenFor(m => m.CityID, new { #id = "CityIds" })
#*#Html.TextBoxFor(m => m.CountryName, new { #id = "CountryName", #calss = "form-control" })*#
#Html.ValidationMessageFor(m => m.CityName)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">ZipCode<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.ZipCode, new { #id = "ZipCode", #class = "form-control ReadOnly", #onclick = "ErrorDivHide()", #onkeypress = "return validateZipCode(event);" })
#Html.ValidationMessageFor(m => m.ZipCode)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-10 col-sm-6 col-md-4">PG Merchant Name</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#*type="text" name="PayControllerMerName" id="PayControllerMerName" class="form-control" />*#
#Html.TextBoxFor(m => m.sPGMerchantName, new { #id = "PayControllerMerName", #class = "form-control ReadOnly", #onclick = "ErrorDivHide()" })
#Html.ValidationMessageFor(m => m.sPGMerchantName)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">PG Merchant ID<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.PayControllerMerID, new { #name = "PayControllerMerID", #id = "PayControllerMerID", #class = "form-control disabled" })
#Html.ValidationMessageFor(m => m.PayControllerMerID)
</div>
</div>
#*<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>*#
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" style="text-decoration:none" data-parent="#accordion" href="#collapseTwo">
<h2 class="panel-title" style="color:White;font-size:135%">
Configuration
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">Merchant Website<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.ReturnURL, new { #id = "ReturnURL", #class = "form-control ReadOnly", #onclick = "ErrorDivHide()" })
#Html.ValidationMessageFor(m => m.ReturnURL)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">Merchant EmailID<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#Html.TextBoxFor(m => m.EmailID, new { #id = "EmailID", #class = "form-control ReadOnly", #onclick = "ErrorDivHide()" })
#Html.ValidationMessageFor(m => m.EmailID)
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">Program Type<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#{
var i = 1;
foreach (KeyValuePair<int, string> k in Model.dicProductType)
{
var ProductName = "ProgramCB" + i;
<span class="col-sm-offset-1 pull-left">
<input type="checkbox" name="ProgramCB" value="#k.Key"
checked="#Model.dicProgramTypeVal[k.Key]" id="#ProductName" class="Disabled"
onclick="ProgramClick(#ProductName)" /><label for="#ProductName" style="font-weight:normal;">#k.Value</label> </span>
i = i + 1;
ProductName = ProductName + "hid";
<input type="hidden" id="#ProductName" name="ProgramCB" />
}
}
</div>
<div hidden="hidden" id="ProgramCBmsg"></div>
</div>
<div class="form-group">
<label class="control-label col-xs-8 col-sm-6 col-md-4">Payment Mode<span style="color:Red">*</span>:</label>
<div class="col-xs-12 col-sm-10 col-md-8">
#{
i = 1;
foreach (KeyValuePair<int, string> k in Model.dicPaymentMode)
{
var elementName = "PaymentCB" + i;
<input type="checkbox" name="PaymentCB"
value="#k.Key" class="Disabled"
checked="#Model.dicPaymentModeVal[k.Key]"
id="#elementName" onclick="PaymentClick(#elementName)" />
<label for="#elementName"
style="font-weight:lighter;font-size:normal">#k.Value</label>
i = i + 1;
elementName = elementName + "hid";
<input type="hidden" id="#elementName" name="PaymentCB" />
}
}
</div>
#Html.HiddenFor(m => m.CurrentStateID, new { #id="StatesID"})
#Html.HiddenFor(m => m.CurrentCountryID, new { #id = "CountryID" })
#Html.HiddenFor(m => m.CurrentCityID, new { #id = "CityID" })
<div hidden="hidden" id="PaymentCBmsg"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="Button">
<span style="color:Red">* Required Fields</span>
<div class="col-xs-12 col-sm-10 col-md-8 pull-right">
<button type="button" class="btn btn-default pull-right"
onclick="Validate('UPDATE')" id="Update">Update</button>
<button type="button" class="btn btn-default pull-right"
onclick="Validate('EDIT')" id="Edit">Edit</button>
</div>
</div>
<div hidden="hidden">
<button type="button" class="btn btn-default" id="btnClear" onclick="Clear();" style="display: none;">Clear</button>
</div>
</div>
</div>
</fieldset>
</div>
}
Server side code
if (objMerchant.CurrentCityID != 0 && objMerchant.CurrentCityID != objMerchant.CityID)
objMerchant.CityID = objMerchant.CurrentCityID;
if (objMerchant.CurrentStateID != 0 && objMerchant.CurrentStateID != objMerchant.StateID)
objMerchant.StateID = objMerchant.CurrentStateID;
if (objMerchant.CurrentCountryID != 0 && objMerchant.CurrentCountryID != objMerchant.CountryID)
objMerchant.CountryID = objMerchant.CurrentCountryID;
What i think going wrong is the Hidden control. Your code with dropdownlist contains
#DropDownListFor and #HiddenFor due to which there will be two input with same name and id, and when you are submitting your form. It is taking from the hidden input.
Try to remove the hidden control, because it is not correct to have same id for more than one element in html
I hope this will solve your porblem.
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>
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>