I distinctly recall that when clicking a checkbox in Chrome the "checked" status under Developer Tools \ Elements would appear/disappear to match the state of the checkbox, complete with a nice little transition to bring one's attention to the change.
<!DOCTYPE HTML>
<body>
<label>
<input type="checkbox" checked>
</label>
</body>
Now clicking the checkbox updates its visual representation, but the status remain constant at the initialization value. How can I recover the previous behavior? (I'm right now at Chrome 62.0.)
Related
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
I am using the ngTouch module in Angular 1.3.12, running my site on both iPad and desktop.
The problem is specific to mobile devices (iPad).
I have a checkbox input wrapped in a label so that both checkbox and label will detect a touch:
<label><input ng-click="doCheck()" type="checkbox" name="checkbox" id="checkbox1" ng-model="myModel"/>My label</label>
Using ngTouch's ng-click directive does appear much more responsive on the iPad, however in this case, I notice that even though I am able to touch quickly on the checkbox or label, the checkmark only toggles after a slight delay.
How can I make this toggle appear faster? Could this be related to the 300ms delay associated with ng-clicks?
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 :)
I have a site made in ASP.NET which I turned into a DotNetNuke module. But now when I try to check the checkboxes it doesn't work.
add the class "normalCheckBox" to your checkbox and DNN will ignore it. ej:
<input type="checkbox" class="normalCheckBox">
The nice people who made DotNetNuke have a special kind of humor. It turns out that checkboxes used on my site are hidden by DotNetNuke and replaced by an image of a checkbox. The reason behind this is unclear to me.
Just take a look at the HTML:
<label style="display: inline-block;">
<input type="checkbox" id="copyAllSettingsCheckBox" name="copyallcheckbox" title="Copy all settings" style="position: absolute; z-index: -1; visibility: hidden;">
<span class="dnnCheckbox">
<span class="mark">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFAAAAAAAApWe5zwAAAAF0Uk5TAEDm2GYAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=">
</span>
</span>
Include any additional settings.
</label>
To fix this I used the code shown below. This effectively cleans up the stuff added by DotNetNuke. Just put it at the end of your javascript.
$('.dnnCheckbox').remove();
$(':checkbox').removeAttr('style');
I'm having similar problems.
In my case I am using a dialog/popup, and the cause of the checkbox not working seems to be the z-index being -1 (negative one).
HOWEVER it seems that the z-index of the checkbox isn't always set to -1.
For example, as I have mine in a dialog (popup) box, initially the z-index is set to -1 (which seems to work).
When I open the dialog with a button click, the z-index is set to 1001 (which also, seems to work).
However with the checkbox contained in an update panel, the postback renders the checkbox's z-index back to -1 (which doesn't work, as the checkbox is underneath the dialog box).
In conclusion - check if z-index of the element containing the checkbox (recursively) is greater than the checkbox z-index, as this might be the cause of it not working (elements without a z-index seem to work with the checkbox fine).
Bit of a hacky fix:
I added some jQuery onload to bring checkbox's z-index above it's parent (in this case the jQuery dialog)
This will get all the inputs with a z-index of -1 within the parent element, and set their z-index 1 above the parent
//the id being the parent element that has the higher z-index
function FixInputZIndex(id){
var element = $('#' + id);
$('#' + id + ' input').filter(function () { return $(this).css('z-index') < 0; }).css('z-index', element.css('z-index') + 1);
}