Topic: Toast alerts opacity hard to read
Hey dclauson@teamadvocate.com 1 week ago you asked this question: https://mdbootstrap.com/support/mdb-select-validation-in-angular/
Would you kindly tell me which "required tags around the mdb-select" you included? Because i have the same problem that the success message is displayed in a weird way but dont know which tags i should include :(
Best regards,
Lukas
PS: Sorry for bothering you with this question here in the MDB Support, I don't know how else I am supposed to get in contact with you :(
dclauson@teamadvocate.com pro commented 6 years ago
Sure, here's an example of what I did: Program I also added this custom style to help out: mdb-select { display: block; > div { > div { &.single, &.multiple { padding-bottom: 0; font-weight: 400; > div { &.placeholder { color: #757575; } } } &.single { > div { &.value { padding-bottom: 0; } } } } } } mdb-select + label { color: #757575; }dclauson@teamadvocate.com pro commented 6 years ago
ok, my HTML didn't post, I'll put it in an answer
Lukas@artemes <div class="md-form"> <mdb-select id="program-list" [options]="programList" [multiple]="true" mdbInputDirective data-error="Select at least one program." data-success=" " placeholder="Choose Option(s)" formControlName="programList"></mdb-select> <label for="program-list">Program</label> </div>
mdb-select {
display: block;
> div {
> div {
&.single, &.multiple {
padding-bottom: 0;
font-weight: 400;
> div {
&.placeholder {
color: #757575;
}
}
}
&.single {
> div {
&.value {
padding-bottom: 0;
}
}
}
}
}
}
mdb-select + label {
color: #757575;
} FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 6 years ago
Dear dclauson@teadadvocate.com, For now, there's no possibility to change opacity value in ng-uikit-pro-standard.js file. You can overwrite opacity of toasts in your scss file by using below styles: #toast-container > mdb-toast-component{ opacity: 1.0 !important; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important; } In future, we'll provide a way to overwrite that value not by scss, but by code in component. Best Regards, DamianMobtex pro commented 6 years ago
It's sucks!Mobtex pro commented 6 years ago
What is the function of opacity in this code? @Component({ selector: 'mdb-toast-component', templateUrl: './toast.component.html', animations: [ trigger('flyInOut', [ state('inactive', style({ display: 'none', opacity: 0 })), state('active', style({ opacity: .5 })), state('removed', style({ opacity: 0 })), transition('inactive => active', animate('300ms ease-in')), transition('active => removed', animate('300ms ease-in')), ]), ], })Damian Gemza staff commented 6 years ago
Dear Mobtex, In this place, we're defining the opacity of the toasts. As I said before, the workaround with changing scss is not elegant, but for now, it has to be done in that way. In the future, we'll provide the better way of changing opacity. Best Regards, Damian