I've following line of code for displaying a message in modal based on the modal type -
<div class="modal-body">
<span class="fa sb-alert-icon" [ngClass]="{ 'fa-exclamation-circle text-danger': (type == error),'fa-exclamation-triangle text-warning': (type == alert)
,'fa-question-circle text-warning': (type == confirm), 'fa-info-circle text-info': (type == info)}">{{message}}</span>
</div>
Issue is that, i don't see proper text color for alert message with above conditions and its rendered as white.
In browser console I don't see 'text-warning' being rendered. But I do see the place where text color is set to white which is shown below.
However, if i change above condition to following -
<span class="fa sb-alert-icon" [ngClass]="{ 'fa-exclamation-circle text-danger': (type == error),'fa-exclamation-triangle text-warning': (type == alert)
, 'fa-info-circle text-info': (type == info)}">{{message}}</span>
I see 'text-warning' css getting applied properly as shown below.
Here CSS overriding doesn't happen.
EDIT-1 :
.sb-alert-icon has following code -
.sb-alert-icon{
font-size: medium;
padding-right: 10px;
}
Not sure, if this is happening because -
using 'text-warning' css consecutively for both 'Alert' & 'Confirm' scenarios.
using both Font Awesome and bootstrap together.
<span class="fa sb-alert-icon"
[ngClass]="{
'fa-exclamation-circle text-danger': type == error,
'fa-exclamation-triangle': type == alert,
'fa-info-circle text-info': type == info,
'fa-question-circle': type == confirm,
'text-warning': type == alert || type == confirm
}">
{{ type }} - {{ message }}
</span>
Related
I used get text/get value with the xpath element, but it's not getting the text/value.
Below are the Code and tried to get text/value and getting element not visible error.
Note : Same element is working For click element.
<div class="cal-month-day cal-day-inmonth cal-day-future cal-day-has-events" ng-class="{
'cal-day-outmonth': !day.inMonth,
'cal-day-inmonth': day.inMonth,
'cal-day-weekend': day.isWeekend,
'cal-day-past': day.isPast,
'cal-day-future': day.isFuture,
'cal-day-has-events': day.events.length > 0,
'cal-day-selected': vm.calendarCtrl.isSelectedDate(day),
'cal-day-open': dayIndex === vm.openDayIndex
}" ng-click="vm.calendarCtrl.onDateSelection(day.date)">
<small class="cal-events-num badge badge-important pull-left ng-binding" ng-show="day.badgeTotal > 0 && (vm.calendarConfig.displayAllMonthEvents || day.inMonth)" ng-bind="day.badgeTotal">2</small>
<span class="pull-right ng-binding" ng-bind="day.label">2</span>
I am trying to add a 3rd condition to my ngClass. At first, I got the following two class to work in my ngClass to alternate the color of the rows
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}"
I am trying to add a 3rd class and condition where the mat-list will show a border line for the top of the mat-list-item. However when I add the 3rd condition, it gives me an error
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}"
I get the following error which is confusing to me
Parser Error: Missing expected : at column 47 in [{ totalrow:i%2 != 0,
odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}] in
Here is the code with the ngFor
<div class="ng-container" *ngFor="let operator of operatorList; let i = index">
<mat-list-item
fxLayoutAlign="start"
style="padding-left: 0px; padding-right: 0px;"
[ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0, borderTopClass : operator === 'fas fa-equals'}">
<i class="{{operator}}"></i>
</mat-list-item>
</div>
Any help is appreciated.
I guess a commenter needs a deeper explanation of how this works.
<div [ngClass]="{
'is-active': condition,
'is-inactive': !condition,
'multiple': condition && anotherCondition,
}">
multiple class will apply when two conditions are both met. Not just one but both.
You could add a third like this: 'multiple': condition && anotherCondition && thirdCondition
Here's a StackBlitz of the OP's code working as he expected and without error. If I can help more pleas let me know.
I have a h:commandLink and I want it to look like is not clickable (i.e the link has a pale color and when you hover over it the cursor becomes not-allowed ).
I'm using the disabled attribute trying to achieve that but it doesn't perform the desired effect: the link doesn't have a pale color and when I hover over it the cursor doesn't become not-allowed. But when I click the commandLink it doesn't do anything, which is good but I'd prefer for it to have the properties previously defined.
Here's my code:
<h:commandLink onclick="function()" href="#{request.contextPath}/create"
styleClass="#{condition ? 'enabled-link' : 'disabled-link'} mar-left-8 cl-blue"
disabled="#{condition ? 'false' : 'true'}"
data-scroll-goto="0" id="show"><i class="fa fa-plus-circle" aria-hidden="true"/>
<p:ajax/>
</h:commandLink>
Apparently the disabled attribute of the commandLink turns the link into a span tag instead of an anchor tag.
So my code displays on the browser in the following fashion:
<span href="/" id="show"
name="show"
class="disabled-link mar-left-8 cl-blue">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</span>
And the reason why the disabled-link class wasn't making any effect is because I was missing this peace of code on the css:
span.disabled-link {
cursor: not-allowed;
opacity: 0.5; }
HTML:
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject">Subject length must be at least 3</span>
</div>
Generated by Angular HTML
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine" class="ng-hide">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject" class="ng-hide">Subject length must be at least 3</span>
</div>
CSS:
.validation-summary-errors > span:not(.ng-hide):last-child {
display: block;
margin-bottom: 20px;
}
Problem:
This CSS select span which no have ng-hide class AND is last child at the same time.
Need:
Select span which no have ng-hide class and last child among them, i.e. only second span.
Only CSS please or another way show some block errors with padding if errors is exists.
As mentioned in comments, that's pretty tough to pull off with just CSS. As an alternative to what you are trying to do, you could attempt to come at it the other way around, by selecting the first element with the class of ng-hide, which is easier because of the way that selectors can only select forwards of elements:
.validation-summary-errors > :not(.ng-hide) + .ng-hide
would select the element immediately after the element you are trying to select now, which means you can sort of flip your styles around.. use margin-top on it instead of margin-bottom on the one previous, etc.
This may not give you exactly what you want, depending on how exactly you are trying to style your elements, but it might work.
<style>
.btn.active {
color: #fff;
background-color: #FE9A2E;
border-color: #d58512;
}
.btn.normal {
color: #fff;
background-color:cornflowerblue;
border-color: #398439;
}
</style>
<div class="btn-group" ng-repeat="list in inputarray" >
<label ng-model="ngModel" class='btn' ng-class="{'btn normal':'{{ngModel}}'== '{{list.score}}' && '{{ngModel}}'== '2','btn active':'{{ngModel}}'== '{{list.score}}' && '{{ngModel}}'!= '2' }" value ="{{list.score}}" btn-radio="{{list.score}}">{{list.name}}</label>
</div>
so here if a user Selects Any Radio button based on this the Css is Set
normal is set if it satisfies 2 conditions
'{{ngModel}}'== '{{list.score}}' && '{{ngModel}}'== '2'
and active is Set if it Satisfies 2 conditions
'{{ngModel}}'== '{{list.score}}' && '{{ngModel}}'!= '2'
and if non of this conditions are met then default class is applied
so the problem i am facing is when i see the first condition is satisfied it is not showing in outout as Expected it still showing active style even though the condition for normal is satisfied
Please any one Help me correcting my code
Try to remove '{{}}'.
E.g.
<label class="btn"
ng-class="{'btn normal': ngModel == list.score && ngModel == '2',
'btn active': ngModel == list.score && ngModel != '2'}"
btn-radio="{{list.score}}">
{{list.name}}
</label>
Note that ng-model and value are not applicable with label element so I removed it.
Hope it helps.