In my Angular project, I am working on creating a component to display an info area that should disappear when a condition is met. While the component partially works as intended, the border always remains visible even when the other style elements are hidden upon meeting the condition.
info-component-html:
<div *ngIf="visible">
<div class="s-help-content"><span [translate]="text"></span></div>
</div>CSS:
.s-help {
background-repeat: no-repeat;
background-position: center left calc(0.37em + 0.37rem);
background-size: calc(1em + 1rem) calc(1em + 1rem);
border: 2px solid $warning !important;
border-radius: 4px;
display: block !important;
color: $gray-700;
min-width: 220px;
white-space: normal !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
.s-help-content {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 45px;
padding-right: 6px;
}Component used in code:
<s-help [visible]="true" [ngClass]="'s-help'" [text]="'INFOTEXT.101' | translate"></s-help>Despite hiding the components, the defined border in the CSS directive still persists. I cannot understand why the border is not hidden when the condition is met. One solution I found was placing the style statement directly in the component.html file instead of within the component code, where it did hide the border but restricted flexibility for using different border colors in other instances.
Another workaround that worked for me was hiding the border by specifying the class at the component definition in the code itself:
info-component.html:
<div *ngIf="visible" class="s-help">
<div class="s-help-content"><span [translate]="text"></span></div>
</div>Component used in code:
<s-help [visible]="true" [text]="'INFOTEXT.101' | translate"></s-help>I welcome any suggestions or alternative solutions to properly hide the border without compromising flexibility in defining CSS classes for different use cases.
https://i.sstatic.net/tnK8M.jpg
This unwanted border shouldn't be here: https://i.sstatic.net/rYHBK.jpg