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;
}
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>
Using :
How to create a Dynamic Bootstrap Multiselect
It was pretty easy to come up with this :
<fieldset class="my-fieldset" style="width: 500px;">
<legend class="my-fieldset">Catégories</legend>
<div style="text-align: center;">
<div style="display: inline;">
<span><b>Matériels</b></span>
<select style="display: none;" class="chkveg" name="categories" multiple="multiple">
#foreach (var configCateg in listeCategories)
{
if (configCateg.APPR_CATEGORIE.CATEGORIE.StartsWith("IF"))
{
<option selected="False" value="#configCateg.DESCRIPTION">#configCateg.DESCRIPTION</option>
}
}
</select>
</div>
</div>
</fieldset>
But what if i want to have some of the options selected and others not...
I know there is a selected property but it didn't change anything when i tried selected="false"
Any help is apreciated
Unfortunately all the below will result in a selected option item.
<option selected >One</option>
<option selected = "False" >One</option>
<option selected = "0" >One</option>
<option selected value="1">One</option>
<option selected=false value="2">222</option>
<option selected="i really dont want this" value="3">33</option>
If you do not want an item selected, you should render an option item without the selected attribute.
<option value="1" selected >One</option>
<option value="2">This one will not be selected</option>
<option value="3" selected >One</option>
You might consider using the Html.DropdDownListFor helper method or SELECT tag helper to render the select element with some options selected.
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.
I have a Rails app using Angular and ngResource to display the content of my "Order" model. Inside the Angular part of the app, I can add and delete objects and it works fine. Only if I navigate to the page through my website (using turbolinks) the "addOrder()" function won't work. The deleteOrder() function and all the rest works, though. I checked what's going on with several console.logs and test functions and discovered that only ng-submit doesn't seem to trigger the function.
This is what the essential parts of my code look like:
app.js
var app = angular.module('shop', ['ngResource']);
$(document).on('ready page:load', function() {
angular.bootstrap(document.body, ['shop'])
});
app.factory('models', ['$resource', function($resource){
...
}]);
app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){
...
$scope.addOrder = function(){
// doesn't work
...
};
$scope.deleteOrder = function(order){
// works
...
};
}])
index.html.erb
...
<form ng-submit="addOrder()">
<tr>
<td>
<input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
</td>
<td>
<select ng-model="newOrder.product_id" class="form-control">
<option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
</select>
<?td>
<td>
<input type="submit" value="+" class="btn btn-success">
</td>
</tr>
</form>
...
<tr ng-repeat="order in orders | orderBy:'-id':reverse">
{{order.id}}
<button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</tr>
...
The fact that confuses me the most is, that seemingly only ng-submit doesn't work - but all the rest does.
EDIT: SOLUTION
So I did some more research and finally figured out that the problem had nothing to do with turbolinks, Angular or Rails. The problem was, that I couldn't have a form inside a table. That caused the DOM to generate a form closing tag right after the opening tag with none of the inputs inside.
I would try defining something like page:change as I guess that is the only part where turbolinks is not working.
$(document).on('ready page:load page:change', function() {});
Just my first guess on this
I found the solution myself.
So I did some more research and finally figured out that the problem had nothing to do with turbolinks, Angular or Rails. The problem was, that I couldn't have a form inside a table. That caused the DOM to generate a form closing tag right after the opening tag with none of the inputs inside.
So this code:
<form ng-submit="addOrder()">
<tr>
<td>
<input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
</td>
<td>
<select ng-model="newOrder.product_id" class="form-control">
<option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
</select>
<?td>
<td>
<input type="submit" value="+" class="btn btn-success">
</td>
</tr>
</form>
would look like this in the DOM:
<form ng-submit="addOrder()"></form>
<tr>
<td>
<input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
</td>
<td>
<select ng-model="newOrder.product_id" class="form-control">
<option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
</select>
<?td>
<td>
<input type="submit" value="+" class="btn btn-success">
</td>
</tr>
I'm following Ryan Bate's RailsCast (#197) for Nested Model Forms.
If I submit a form that has 3 fields added in the controller:
3.times { #prof.experiences.build }
...they save properly. If the field, however, is added via jQuery, it isn't saved.
Has anyone else had experience with this sort of problem before?
EDIT: HTML Generated without jQuery:
<div class="fields">
<table>
<tbody><tr>
<td>Position Title:</td>
<td><input id="applicant_profile_experiences_attributes_0_title" name="applicant_profile[experiences_attributes][0][title]" size="30" type="text"></td>
</tr>
<tr>
<td>Employer:</td>
<td><input id="applicant_profile_experiences_attributes_0_employer" name="applicant_profile[experiences_attributes][0][employer]" size="30" type="text"></td>
</tr>
<tr>
<td>Responsibilities</td>
<td><textarea cols="40" id="applicant_profile_experiences_attributes_0_description" name="applicant_profile[experiences_attributes][0][description]" rows="4"></textarea></td>
</tr>
<tr>
<td>Start Date:</td>
<td><select id="experience_from_date_1i" name="experience[from_date(1i)]">
<option value="1970">1970</option>
<option value="1971">1971</option>
</select>
</td>
</tr>
</tbody></table>
<p><input id="applicant_profile_experiences_attributes_0__destroy" name="applicant_profile[experiences_attributes][0][_destroy]" type="hidden" value="false">Remove</p>
</div>
Code added with jQuery:
<div class="fields">
<table>
<tbody><tr>
<td>Position Title:</td>
<td><input id="applicant_profile_experiences_attributes_1366407307283_title" name="applicant_profile[experiences_attributes][1366407307283][title]" size="30" type="text"></td>
</tr>
<tr>
<td>Employer:</td>
<td><input id="applicant_profile_experiences_attributes_1366407307283_employer" name="applicant_profile[experiences_attributes][1366407307283][employer]" size="30" type="text"></td>
</tr>
<tr>
<td>Responsibilities</td>
<td><textarea cols="40" id="applicant_profile_experiences_attributes_1366407307283_description" name="applicant_profile[experiences_attributes][1366407307283][description]" rows="4"></textarea></td>
</tr>
<tr>
<td>Start Date:</td>
<td><select id="experience_from_date_1i" name="experience[from_date(1i)]">
<option value="1970">1970</option>
<option value="1971">1971</option>
<!-- removed big date list -->
</select>
</td>
</tr>
</tbody></table>
<p><input id="applicant_profile_experiences_attributes_1366407307283__destroy" name="applicant_profile[experiences_attributes][1366407307283][_destroy]" type="hidden" value="false">Remove</p>
</div>