I've implemented angular translate and it's working well so far.
I do have one problem with the following code though:
REGISTER_RULES_ACCEPT : ' I have read the Rules and hereby accept them.<span class="registration-important">*</span>',
Html Implementation:
<input id="checkbox" type="checkbox" name="checkbox" value="rules"><a translate="REGISTER_RULES_ACCEPT"></a></input>
It displays correctly and everything, when going over the link with my mouse it shows the link in the bar. However when I click it, nothing happens. I can right mouse or mid mouse click it and open it in another tab, but left clicking it does nothing. Any idea whats the problem here?
You already have anchor a tag in translation then just bind it in span or paragraph element in view code. So, your template code can be:
<input id="checkbox" type="checkbox" name="checkbox" value="rules" />
<span translate="REGISTER_RULES_ACCEPT"></span>
Plunker Example
Related
Hi i am new to keyboard navigation, here is my angular application after clicking on that checkbox when i use the keyboard tab it should take to that button , right now i am using tabindex but it is not working.
<div class="row well" ng-if="actionRequired">
<label for="checkbox" class="bg-warning" style="background-color:#ddd;margin-left:32px;">
<input type="checkbox"
id="checkbox"
ng-checked="false"
ng-change="checkActions()"
ng-model="action.complete"
ng-disabled="contacts.length == 0" >
{{checkListEmergencyConfirmLabel}}</label>
</div>
</div>
here is the button code :
<button type="button" role="button" class="btn btn-primary" ng-disabled="!reviewComplete()"
ng-click="setReviewComplete()" tabindex="1">{{commitLabel}}</button>
Set tabindex=1 for the input type=checkbox and tabindex=2 for the button.
As MDN notes,
The tabindex global attribute is an integer indicating if the element
can take input focus (is focusable), if it should participate to
sequential keyboard navigation
Update: You heard it wrong, see W3C spec
The tabindex content attribute allows authors to control whether an
element is supposed to be focusable, whether it is supposed to be
reachable using sequential focus navigation, and what is to be the
relative order of the element for the purposes of sequential focus
navigation. The name "tab index" comes from the common use of the
"tab" key to navigate through the focusable elements. The term
"tabbing" refers to moving forward through the focusable elements that
can be reached using sequential focus navigation.
The tabindex attribute, if specified, must have a value that is a
valid integer.
I've created a simple demo to describe my question, [link here][1]
I use angular ng-repeat to create radio, with the same ng-model, different values, the bootstrap tab works well, but the radio not display well, the point of the radio missing when i click other tab, could anyone help me ?
Thanks for Marcus's solution, problem has been solved, but I'm looking for if there has a better idea?
Maybe try to add more Angular to the mix:
http://plnkr.co/edit/gV88Lrh7Xc6xqkF9SxCM?p=preview
<input type="radio" role="tab" ng-model="ajaxSettings.method" value='GET'/>GET
(...)
<div class="tab-pane" ng-class="{'active': ajaxSettings.method == 'GET'}" id="GET"></div>
I am trying to use hover to show dropdown / popover and use data-container="self" to make the dropdown / popover stay appear when mouse moved to it. This method works on Google Chrome but not on Firefox.
Example Code:
<button type="button" data-placement="right" data-trigger="hover | click" data-delay="300" bs-dropdown="dropdown" data-container="self">Click to toggle dropdown</button>
How can I get it works on firefox?
I never heard of the self keyword as the container parameter in angular-strap. Where does it come from?
Anyway, here, container is useful if you want to append the dropdown to another element. Since it does not seem to be your case, simply do not provide data-container, and the dropdown will be appended to the element itself.
EDIT:
Okay, so, I tried, and saw the problem you are describing. You could try the solution given here (https://stackoverflow.com/a/21293850/4506790): add a specific class to your button, and give it in data-container.
<button type="button"
class="dropdown-btn"
data-placement="right"
data-trigger="hover"
data-delay="300"
bs-dropdown="dropdown"
data-container=".dropdown-btn">
Hover to toggle dropdown
</button>
I have an an input box in my angular template that looks like below:
<input type="text"
name="growth"
label="Growth"
ng-model="mySettings.growth"
class="input-mini text"
required
integer
min="0"
max="4"
tooltip
tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[mySettings.growth.$invalid]}}"
tooltip-placement="right"
/>
When this is rendered by angular, it looks like below:
<input type="text" name="growth" label="Growth" ng-model="mySettings.growth" class="input-mini text ng-scope ng-pristine ng-valid ng-valid-required ng-valid-integer" required="" integer="" min="0" max="4" tooltip="" tooltip-trigger="never" tooltip-placement="right">
#shawdow-root (user-agent)
<div id="inner-editor">10</div>
</input>
What is this #shadow-root element that's showing up above ?
The #shadow-root is not really an element, but an annotation added by the browser to make clear that the following element (the .inner-editor div element) is the Shadow DOM added by the browser to display the input field.
Consider a more complex form element like a slider. As a developer you simply set the input type to "range" and have a functional slider which is represented by a single input tag.
The knob and the slider track is rendered by the browser as well, but hidden for any CSS selectors or JavaScript DOM traversal functions since you only add a single input tag it would break things if the browser silently attaches DOM nodes to render the slider correctly. This "hidden DOM elements" are called Shadow DOM.
In Chrome Browser the visibility of the Shadow DOM in the Elements tab can be switched by an option under Settings > General > Elements > 'Show user agent shadow DOM'.
For further information about Shadow DOM I found this link from HTML5 Rocks and this resource were very helpful for me.
This Shadow DOM elements can be found inside a normal input tag as well, it does not relate to the AngularJS input directive you have in your example.
For CSS selection there is a ::shadow pseudo class and also a JavaScript Shadow DOM traversal API - see the HTML5 Rocks link above.
The upcomming WebComponents make use of the shadow DOM. If you are interested in implementations you may have a look at thePolymer project and its sources which makes heavy use of the Shadow DOM.
i use a checkbox in my phonegap android app like this:
<div style="margin-top: 35px;" class="" id="divSaveUserDataCheckbox">
<input type="checkbox" id="saveUserDataCheckbox" > </input>
<label id="labelForSaveUserData" for="saveUserDataCheckbox" style="font-size:100%;padding-top: 25px">save login</label>
</div>
i want to check my checkbox by clicking on the label but this doesnt work, why? Shouldnt this work out o the box?
greets,
Tom
ok, I found my problem. I was using FastClick, to disable the waiting time between "tap" and "doubletap". But this blocked partially somehow the checkbox clicks. I'm not creating a webapp, just a website, so it's not so important for me, but if you find some workaround, please write a comment :)