I have this page that I recently used Bootstrap to make it responsive. Prior to the responsiveness the page worked correctly but looked bad in different screen sizes. Now, it looks great in multiple screen sizes but the dropdownlists do not work. If I remove the class="col-lg-10 col-md-10 col-xs-12"then the dropdownlist works again. Also, if I pull the dropdownlist out of the div and put it somewhere else on the page it also works.
For clarification when I say it doesn't work I mean if I click on the dropdownlist it does not expand. btw, I have more dropdownlists in the form, I just removed them to be more concise in the code.
Here is the code:
<div row>
<div class="col-lg-10 col-md-10 col-xs-12">
<table class="table table-condensed">
<tr>
<th>#Html.LabelFor(m => m.CategoryId, htmlAttributes: new { #class = "control-label col-md-2" })</th>
</tr>
<tr>
<td>
<span style="font-weight:normal;">#Html.DropDownListFor(m => m.CategoryId, new SelectList(ViewBag.Category, "CategoryId", "CategoryName"))</span>
#Html.ValidationMessageFor(m => m.CategoryId, "", new { #class = "text-danger" })
</td>
</tr>
</table>
</div>
</div>
I found that I can add this link below to the page which will fix the dropdown but it messes up all the formatting.
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and here is the rendered HTML:
<div class="col-lg-10 col-md-10 col-xs-12">
<table class="table table-condensed">
<tr>
<th><label class="control-label col-md-2" for="CategoryId">Category</label></th>
</tr>
<td>
<span style="font-weight:normal;"><select data-val="true" data-val-required="The Category field is required." id="CategoryId" name="CategoryId"><option value="ae159a72-2447-42b6-9693-149964fdc896">Other</option>
<option value="45cf430d-bd7e-4003-ab97-33fb55520551">E-Mail/ Outlook</option>
<option value="dc27d6b2-59d9-46fd-b92e-42cf70b7f732">Administrative</option>
<option value="44124582-e37a-47f4-a98a-5f97049ba5b9">OPS</option>
<option selected="selected" value="c0ed4cd4-400f-479c-aa26-8522667241d5">Automation</option>
<option value="9080fef6-382f-49ad-993b-9f0689f90c95">Network</option>
<option value="d7b2ce5f-f9e6-48f1-a6bb-b4141c8bdc7e">stcusa.com</option>
<option value="d8121018-a401-48a0-9dec-c209b3be3495">Software</option>
<option value="7ba3a1e6-5cd6-4d63-8c09-d54826261441">Reporting</option>
<option value="efe7c637-e210-44d4-83a3-dac3199f5cae">Phones</option>
<option value="f8f35cdd-09a6-459d-9a7c-dd28df0f8776">Hardware</option>
</select></span>
Correct your div tag:
<div row>
should be
<div class="row">
In most of situations where an element does not respond to clicks! there's another div covering your it because of problems in container and row DIVs. It's not about razor, look into your rendered html.
Related
Form inputs error messages and form entries are not updated when the inputs are changed.
I tried to switch to form instead of ng-form, tried different kind of validations (required, email, pattern, ...) None seemed to change anything.
I am using
angular 1.7
angular-material 1.1.9
angualr-messages 1.7
This form is inside a table > tbody
<ng-form name="editedJiraForm">
<tr md-row ng-repeat="task in jira.tasks track by $index">
<td md-cell>
<md-input-container>
<label>Title</label>
<input name="title" ng-model="editedJira.title" required>
<div ng-messages="editedJiraForm.title.$error" md-auto-hide="false">
<div ng-message="required">Title required</div>
</div>
</md-input-container>
</td>
<td md-cell>
<md-input-container>
<label>Description</label>
<textarea name="description" ng-model="editedJira.description" md-maxlength="5000" rows="3" md-select-on-focus required></textarea>
<div ng-messages="editedJiraForm.description.$error" md-auto-hide="false">
<div ng-message="required">Description required</div>
</div>
</md-input-container>
</td>
<td md-cell>
<md-input-container>
<label>Priority</label>
<input name="priority" ng-model="editedJira.ubi_priority" ng-pattern="/^(01|02|03)$/"/>
<div ng-messages="editedJiraForm.priority.$error" md-auto-hide="false">
<div ng-message="pattern">Invalid priority</div>
</div>
</md-input-container>
</td>
<td md-cell>
<md-input-container>
<label>Estimation</label>
<input name="estimation" ng-model="editedJira.estimation" ng-pattern="/^\d+(.\d+)?$/">
<div ng-messages="editedJiraForm.estimation.$error" md-auto-hide="false">
<div ng-message="pattern">Invalid estimation, use int or float</div>
</div>
</md-input-container>
</td>
<td md-cell>
<md-button ng-disabled="editedJiraForm.$invalid" class="md-fab md-primary md-mini" aria-label="validate" ng-click="editJira(selection.feature, $index, true)">
<md-icon md-svg-src="static/images/validate.svg"></md-icon>
</md-button>
<md-button class="md-fab md-primary md-mini" aria-label="cancel" ng-click="editJira(selection.feature, $index)">
<md-icon md-svg-src="static/images/cancel.svg"></md-icon>
</md-button>
</td>
</tr>
</ng-form>
I expect to have
- The messages displayed when for instance the priority does not match the pattern.
- Similarly, when the form is invalid the validate button should be disabled.
Though in my case:
- The inputs fields do become red when the pattern or requirement is not respected but the messages do not show up.
- The validation button is always active.
When displaying the editedJiraForm in the html it is not updated as I edit the form, maybe a problem there ?
Ok if anybody got a similar problem, I found an answer from there
This was due because of the form being split into several breaking it.
The solution was to remove the actual element and replace it by using ng-form name="editedJiraForm" on the element.
This gives the following code:
<tr ng-form name="editedJiraForm">
<td md-cell>
<md-input-container>
<label>Title</label>
<input name="title" ng-model="editedJira.title" required>
<div ng-messages="editedJiraForm.title.$error" md-auto-hide="false">
<div ng-message="required">Title required</div>
</div>
</md-input-container>
</td>
<td md-cell>
....
</td>
</tr>
I am having an issue with binding an onChange event to an EditorFor thats being dynamically loaded a dropdown list of countries in a partial view. I have spent a few hours looking for a solution as to what i am doing wrong and why the prop/attribute onChange event is not binding to the div element when the page loads.
The EditorFor block:
<div class="row">
<div class="col-md-2 labelText">#Html.GetResourceString("BuyNow.Step5", "CountryLabel")</div>`enter code here`
<div class="col-md-10">
#Html.EditorFor(m => m.Country, "DropDownSelect", new { DisplayLabel = "empty", List = BaseController.CountryList, CssClass = "tealInput", onChange = "OnChange()" })
</div>
</div>
Now when i view source on the page once its loaded to check if the onChange is present in the div it is not.
Viewed Source after page load:
<select class="tealInput" data-bind="value: DefaultBilling.Country" data-val="true" data-val-length="The Country value cannot exceed 50 characters. " data-val-length-max="50" id="DefaultBilling_Country" name="DefaultBilling.Country"><option value="">Select</option>
As you can see the onchange isnt present and so far i have not been able to debug the issue. Any information on this and possible resources to go study to find out why this is happening would be greatly appreciated.
I have changed the way I am displaying the dropdown:
<div class="row">
<div class="col-md-2 labelText" style="white-space:nowrap;">#Html.GetResourceString("BuyNow.Step5", "CountryLabel")</div>
<div class="col-md-10">
<select class="tealInput" name="country" data-bind='value: DefaultBilling.Country' id="ddlCountry_#Model.AddressTypeId" style="text-align:right;" onchange="OnChange()">
#foreach (var countries in BaseController.CountryList)
{
<option value="#countries.Value">#countries.Text</option>
}
</select>
</div>
</div>
Same issue here as well, on my watch its showing OnChange() is unavailable
It seems like selecting an option with very long text makes the select2 container grow.
Example: https://jsfiddle.net/vxbbph6h/1/
To reproduce the problem:
1) Resize the browser to a small width
2) Select the last option on the dropdown
HTML:
<body>
<div role="main" class="col-sm-9 ef-middle-column">
<table width="100%">
<tbody>
<tr>
<td>
<label for="myDropdown">dropdown</label>
</td>
<td>
<select
id="myDropdown"
style="max-width:200px"
name="myDropdown"
>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three-Thirty">Three-Thirty (£69.00)</option>
<option value="Twenty-Two">Twenty-Two</option>
<option value="One hundred and lots more numbers after this to see what happens with long text">One hundred and
lots more numbers after this to see what happens with long text</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
JS:
$('#myDropdown').select2();
CSS:
[class*="col-"] .select2-container {
width:89%!important;
max-width: 481px;
}
A weird thing keeps happening on one of my ASP.NET MVC 3 apps.
I am fetching insert rows via jQuery Ajax api and there is no problem with that. But when I get the necessary partial view back, it is coming without validation attributes and I am unable to rebind the validation for those rows.
Here is what I get as ajax response:
<input type="hidden" name="accommPropertyPeriods.index" autocomplete="off" value="ccaa15b3-76f1-4215-8bb5-a62d700bfc1e" />
<table style="width:100%;">
<tr>
<td>
<div class="editor-field">
<select class="chzn-select-deselect" data-placeholder="Choose an Alias..." id="accommPropertyPeriods_ccaa15b3-76f1-4215-8bb5-a62d700bfc1e__AccommPropertySeasonPeriodAliasID" name="accommPropertyPeriods[ccaa15b3-76f1-4215-8bb5-a62d700bfc1e].AccommPropertySeasonPeriodAliasID" style="min-width:100px;"><option value="302">A</option>
<option value="303">B</option>
<option value="304">C</option>
<option value="305">D</option>
</select>
</div>
</td>
<td>
<div class="editor-field">
<input class="datefield" id="accommPropertyPeriods_ccaa15b3-76f1-4215-8bb5-a62d700bfc1e__PeriodStartsAt" name="accommPropertyPeriods[ccaa15b3-76f1-4215-8bb5-a62d700bfc1e].PeriodStartsAt" type="text" value="" />
</div>
</td>
<td>
<div class="editor-field">
<input class="datefield" id="accommPropertyPeriods_ccaa15b3-76f1-4215-8bb5-a62d700bfc1e__PeriodEndsAt" name="accommPropertyPeriods[ccaa15b3-76f1-4215-8bb5-a62d700bfc1e].PeriodEndsAt" type="text" value="" />
</div>
</td>
</tr>
</table>
Here is what I should be getting :
<input type="hidden" name="accommPropertyPeriods.index" autocomplete="off" value="84ddd0f5-a3e2-4f10-8e67-f32528c6393d" />
<table style="width:100%;">
<tr>
<td>
<div class="editor-field">
<select class="chzn-select-deselect" data-placeholder="Choose an Alias..." data-val="true" data-val-number="The field AccommPropertySeasonPeriodAliasID must be a number." data-val-required="The AccommPropertySeasonPeriodAliasID field is required." id="accommPropertyPeriods_84ddd0f5-a3e2-4f10-8e67-f32528c6393d__AccommPropertySeasonPeriodAliasID" name="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].AccommPropertySeasonPeriodAliasID" style="min-width:100px;"><option value="302">A</option>
<option value="303">B</option>
<option value="304">C</option>
<option value="305">D</option>
</select>
<span class="field-validation-valid" data-valmsg-for="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].AccommPropertySeasonPeriodAliasID" data-valmsg-replace="false">*</span>
</div>
</td>
<td>
<div class="editor-field">
<input class="datefield" data-val="true" data-val-required="The PeriodStartsAt field is required." id="accommPropertyPeriods_84ddd0f5-a3e2-4f10-8e67-f32528c6393d__PeriodStartsAt" name="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].PeriodStartsAt" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].PeriodEndsAt" data-valmsg-replace="false">*</span>
</div>
</td>
<td>
<div class="editor-field">
<input class="datefield" data-val="true" data-val-required="The PeriodEndsAt field is required." id="accommPropertyPeriods_84ddd0f5-a3e2-4f10-8e67-f32528c6393d__PeriodEndsAt" name="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].PeriodEndsAt" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].PeriodEndsAt" data-valmsg-replace="false">*</span>
</div>
</td>
</tr>
</table>
GUIDs don't have to be the same. I am doing so-called non-sequential binding.
Here is the the action which I am invoking through jquery ajax to get a new insert row:
[HttpPost]
public PartialViewResult accommPropertySeasonPeriodCreatePartialView(int id, int subid) {
//some other stuff going on here. non-related to partial view.
return PartialView("_AccommPropertySeasonPeriodCreatePartialView");
}
I am nearly out of my mind to figure out why this is happening. Any idea?
The Html.* helpers such as Html.TextBoxFor, Html.CheckBoxFor, ... emit validation attributes only if used inside a form. So make sure you wrap them in a Html.BeginForm call. As far as client side validation is concerned, you should call the jQuery.validator.unobtrusive.parse method after you update your DOM in order to reapply client validation. And yet another article.
If you don't have a form you can cheat and put the following in the partial:
#model MyViewModel
#{
ViewContext.FormContext = new FormContext();
}
#Html.EditorFor(x => x.Foo)
Now the helper will emit data-* validation attributes on the input field.
I am using strongly type view model for my view , Validation works for all the text fields but it doesnt work for fileupload , below is the code:
<div class="bg-content-inner">
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm("Create", "Track", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ %>
<%: Html.ValidationSummary("Please Correct the errors and try again")%>
<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td style="width:100px;">
<div class="editor-label">
<%: Html.LabelFor(model => model.Name) %>
</div>
</td>
<td colspan="2">
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Name, new { style = "width:300px;" })%>
<%: Html.ValidationMessageFor(model => model.Name,"Circuit Name Required") %>
</div>
</td>
</tr>
<tr>
<td>
Main Image
</td>
<td>
<div class="editor-field">
<input type="file" name="files" id="file1" style="color:White" />
<%:Html.ValidationMessageFor(model => model.ImageLarge,"Required") %>
</div>
</td>
</tr>
<tr>
<td>
Detail Image
</td>
<td>
<div class="editor-field">
<input type="file" name="files" id="file2" style="color:White" />
<%:Html.ValidationMessageFor(model => model.ImageSmall,"Required") %>
</div>
</td>
</tr>
<tr></table>
If you are using unobtrusive validation, the HtmlHelpers will insert some data-XXXX attributes to enable client-side validation... since MVC does not have a HtmlHelper for INPUT[FILE] and you have to manually insert the INPUT element... you can also add the data-XXXX attributes yourself... them and the client-side validation will work (well... at least in FF and Chrome... I have not tested it in others)... so...
replace:
<input type="file" name="files" id="file2" style="color:White" />
with:
<input type="file" name="files" id="file2" style="color:White" data-val="true" data-val-required="File is required" />
Hope it helps you.
I think the validation message is looking for ImageLarge and ImageSmall to validate against.
If you change the name and id attributes to match the model image names does it work? e.g
name="ImageLarge" id="ImageLarge"
You can't client-side validate an <input type="file" />; it must be POSTed to the server and the upload examined, there just isn't a way around this.
May be AjaxSubmit helps you.