I have some simple html code as shown here:
<div class="container card" hidden=false>
<canvas id="myChart"></canvas>
</div>
As you can see the hidden tag is included and set to false. Not the string 'false' just the boolean false. Yet when run the div is still completely hidden and when I check the CSS code for why it shows that the hidden tag is giving it:
display: none !important; But that shouldn't be the case when hidden is set to false right?
Instead of hidden use [style.display]="hideElement?'none':'inherit'"
Where in .ts you would set whether hideElement is true or false;
Alternatively create a class .display-hide{ display:none;} and then toggle it using
[class.display-hide]="hideElement"
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can’t be used until the login process has been completed. Browsers won’t render elements with the hidden attribute set.
I used this link for reference:
Because hidden doesn't need a value: it either is hidden, or it isn't. The boolean you're sending is ignored. So, basically only add hidden if it should be hidden and add nothing if it should show.
ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden
The hidden attribute in HTML is an attribute which can't be set to any value.
For more info about the syntax, visit the MDN docs.
just use property binding on hidden
[hidden]=" some expression"
Related
I'm trying to follow a suggestion and have set a marker on the input control in my component like this.
<span (click)="onEditClick()"
[class.hidden]="editing">{{value}}</span>
<input #input
value="{{value}}"
[class.hidden]="!editing">
I noticed that clicking the span hides it and presents the input but an additional click is required to make the input control actually focused for editing. I tried to focusify it as follows.
#ViewChild("input") input: ElementRef;
onEditClick() {
this.editing = true;
this.input.nativeElement.focus();
}
It doesn't work, so I verified that the native element is set and corresponds to what I expect. It did. And since there are no errors in the console, I'm a bit stuck not knowing how to diagnose it further.
I suspect that I'm missing something rather basic that can easily be inferred from the provided description.
The problem is that the input element is still hidden when you try to set focus on it. To make sure that the input element has become visible after setting the editing property, force change detection by calling ChangeDetectorRef.detectChanges():
onEditClick() {
this.editing = true;
this.changeDetectorRef.detectChanges();
this.input.nativeElement.focus();
}
See this stackblitz for a demo.
With (Vue) Element UI I'm trying to disable a Dialog element from closing on click.
In the docs it say there is a close-on-click-modal attribute, but it's default is true and I have no idea on how to set it to false.
close-on-click-modal="false" gives this error: "closeOnClickModal". Expected Boolean, got String.
Is there a way to disable this setting?
Please try it by changing close-on-click-modal="false" to :close-on-click-modal="false"
If you use the double dot, the content of the attribute is evaluated as Javascript. If you don't, it's a string.
I have a paper-textarea inside of a drawer. When I go to the page the paper-textarea autofocuses, which opens the drawer. I've tried to get rid of the focus by trying autofocus="false" and autofocus="off", but neither have worked for me. Any help would be appreciated.
<paper-textarea id="descriptionInput" label="Description" invalid="{{descriptionError}}" error-message="please enter a valid description" value="{{description}}" autofocus="false"></paper-textarea>
Update: Another way to go about this might be to remove the focus programatically, but I've tried this.$.descriptionInput.blur() inside of the attached function, and it's not working either.
This is due to iron-autogrow-textarea's autofocus property default value being set to "off". The autofocus attribute is active if it exists, the only way to disable it is to remove it all together (ie, autofocus="disabled" or autofocus="off" will still autofocus the tag).
I've created a pull request and this will hopefully be fixed in future versions.
For the time being, you can create a disabled input tag before the textarea with an autofocus attribute and visibility set to hidden and this will prevent the textarea from gaining focus.
<input disabled autofocus style="visibilty: hidden">
I ran into an issue with the answer by Kevin Ashcraft, on Safari it was not working.
Here is another option, since the issue it due to the presence of the autofocus attribute, you need to remove that attribute. So I have polymer element and in there I have the following
ready:function(){
var list = Polymer.dom(this.root).querySelectorAll('iron-autogrow-textarea');
list.forEach(function (e) {
e.textarea.removeAttribute("autofocus")
});
}
This scans my dialog, finds all iron-autogrow-textarea and removes the attribute from them... you can change the selector to get only the ones you need.
Update this has been fixed as of latest version Should mention this has been fixed in latest version of https://github.com/PolymerElements/iron-autogrow-textarea/releases/tag/v1.0.8
Digging into the core-list source code, it looks like it checks an element's hidden attribute using Javascript. But setting <div hidden="false"> results in the div being hidden. Can I somehow bind an expression to this Javascript attribute or do I need to submit a PR to core-list to explicitly add support?
You can hide / show polymer elements with the hidden? attribute.
<span hidden?="{{showSpan}}">This may or may not be hidden.</span>
if the boolean expression 'showSpan' is truthy, the span element is displayed, otherwise it is omitted.
You can toggle the state of showSpan like this:
<div on-click="{{showinput}}">
<span hidden?="{{showSpan}}">This may or may not be hidden</span>
</div>
Polymer({
showSpan: false,
showinput: function() {
this.showSpan = !this.showSpan;
}
});
If you want that your element not being hidden you should remove the hidden attribute. hidden="false" does not means much in html.
See JSFiddle
http://jsfiddle.net/gK6kX/11/ has the lines:
$("input#aaa")[0].checked = false;
$("input#aaa")[0].setAttribute('checked', false);
The third box is checked on Chrome but not IE (IE9).
I understand why it's checked on Chrome - checked="false" means the box is still checked.
I don't understand why it isn't checked on IE.
It looks as if the first line (checked = false on the DOM object, vs. setAttribute) somehow makes a difference on IE, but not Chrome.
What does this first line do? And why would someone have used both lines rather than just setAttribute?
If you're using jQuery, use $.attr() to set the initial checked state. Use $.prop() to change the property after the fact. So, if you have a checkbox that is loaded and already checked, do this to uncheck it:
$("input#aaa")[0].prop('checked', true); // set checked
$("input#aaa")[0].prop('checked', false); // uncheck
Note that if the checked attribute is present on the element at all, regardless of its value, then the initial state of the checkbox should be considered checked. This is according to the W3C. So, if you have checked="false" on the checkbox, it'll still be checked. The checked attribute only sets the initial state of the checkbox via the defaultChecked property. To change the state of the checkbox thereafter, you need to modify the checked property (the attribute no longer matters).
Doing this is technically for setting the initial state of the checkbox:
$("input#aaa")[0].attr('checked', 'checked'); // initial state is checked
Again, if you want to change the checked state after the checkbox has been created, use $.prop().
Reference (I suggest reading both pages in their entirety):
http://api.jquery.com/attr/
http://api.jquery.com/prop/