When I add a label to a field in any form within my AngularJS app, it results in a behavior where clicking a field assigns focus to the field above, thus making it impossible to select a field.
The quick fix it to not use labels and just a different tag to replace labels, but it seems like an odd bug not being able to use labels for fields. Anyone else experience this lately?
Here is an Angular fiddle for solving this Angular riddle:
http://bit.ly/154zU1H
You messed up your close tags on the labels:
http://jsfiddle.net/ysQPt/
<label>Label 1<label>
<label>Label 1</label>
Related
Im trying to create a form, first element should be a tag with a few options and each of them will dynamically bring up a different set of forms depending on what the user chooses. The idea is within the select tag there will be different categories like cars, properties etc.. first user only sees that and when chose, it will bring up a set of input fields that required for that category.
Anyone got an idea what would be the best way to do it in angular?
Using the ui.router module, you can populate a DOM element (ui-view) with an HTML template file. On selection of the dropdown, you're telling angular to go to a different "state".
Check out the following plunkr I made: http://plnkr.co/edit/jnKQOvkE4nJinEQ5zhr6?p=preview
I could have been in a search for this. Once the form is submitted , if the errors are available it shows on top as the validation summary (May be it will be done). Here is the critical. When i click on the error message, the focus should go to the corresponding error field. The field may be in the same tab or other tabs or other panels etc
Could it be possible to achieve?
A simple way to achieve that would be to make the error message a label for that particular field:
<label for="myField">some error</label>
&
<input id="myField">
Clicking on the message would then automatically focus the field, no matter how far in the DOM the two elements are from each other.
An input can also be focused by JavaScript (see .focus() documentation). In both cases, the input needs to actually be present in the DOM before it can be focused.
I would like to use the angular x-editable directive to work with a text field per the following
(a) I don't want to display buttons. I tried the buttons=no option but it does not seem to work with input of type text.
See the fiddle here.
(b) I want the underlying ng-model property to update immediately with each keystroke , without waiting for the user to focus out of the input. (as is default behavior with vanilla angular, eg. <input type=text ng-model="somepropertyname" />
How can one achieve (a) and (b) with angular x-editable? link to fiddle
Answer to 1(a) is to add the blur="submit" attribute (in addition to buttons="no")
hello i'm having problems with the labels of checkboxes. when i use more than one model of the same class in a single view the checkboxes seem not to use the names from attributeLabels of that model.
i.e. if i have this in my view:
$form->checkBoxRow($colorArray['left'],'[left]special_request');
the checkbox get rendered with a label "[left]special request" instead of "Special Request" as stated in the attributeLabels of the Color model.
on the other hand dropdown lists, text field, etc are rendered correctly.
i have noticed this bug/feature after updating bootstrap from version 0.9.12.r211 to 1.0.0.r296.
The checkBoxRow and all methods ended with Row get the label from the array returned by Model->attributeLabels().
You can either change the autogenerated labels or use the TbLabel widget.
Choose the best for your issue.
I noticed that on certain websites, if you want to tick a checkbox on or off, you just need to click the corresponding text. When I put a checkbox with some descriptive text on my page, I have to actually hit the checkbox for it to get ticked. How is the former effect achieved?
Consider using a <label> as in this example:
<input type="checkbox" name="call" id="willcall">
<label for="willcall">click on this text to select the checkbox</label>
This example from: http://www.askdavetaylor.com/make_text_adjacent_to_checkbox_clickable.html
I'm sure that they use a JS script to achieve this. It's most likely a label that is being clicked, and they might add an onclick() event to the label which uses the javascript to find the checkbox and add the CHECKED attribute to it. Sorry for not supplying code, but I hope that gives you some understanding on what those websites do.