search

Alberplz / angular2-color-picker

Angular 2 Color Picker Directive, no dependences required.
MIT License
185 stars 82 forks source link

Avoid using [hidden] attribute to hide picker dialog #71

Closed BrainCrumbz closed 5 months ago

BrainCrumbz commented 7 years ago

There are cases when the picker dialog remain visible even after the [hidden] attribute is set to true. According to this post and some questions on StackOverflow, it seems like such attribute is relatively easy to break, e.g. when the same elements gets assigned a display value by some CSS rule.

According to same post, some of the viable alternatives would be:

Define a css style for hidden attribute with display:none !important at the end of css stylesheet.

[hidden] {
  display: none !important;
}

Second solution is, let’s not use hidden attribute. You can achieve your purpose with following code.

<p [style.display]="hideElement?'none':'inherit'">
   I am using hidden.
</p>
cmckni3 commented 7 years ago

This is very true.

Usually the recommendation is to use ngIf but ngIf. I think the ngIf may flicker upon showing and using the CSS display property is better.

prystoynyy commented 7 years ago

Hi!

This is true, but [hidden]="!show" isn't working in IE10.

My solution:

  1. use custom attribute [attr.data-hidden]="!show"
  2. apply css rule for this attribute [data-hidden="true"] { display: none !important; }