How to apply different CSS(styling) for multiple igx-dialog in same component

State Not Answered
Replies 3 replies
Subscribers 7 subscribers
Views 1914 views
Users 0 members are here

185

How to apply different CSS(styling) for multiple igx-dialog in same component

arsv M posted over 2 years ago

In my page I have multiple igx-dialog compoenents.

For example

<igx-dialog #dialog1 leftButtonLabel="Cancel" rightButtonLabel="OK" >

<igx-dialog #dialog2 leftButtonLabel="Cancel" rightButtonLabel="SAVE" >

For dialog1 and dialog2 I wanted to have different styling i.e., apply different font, different back ground color - different CSS

The below CSS is applying to all dialog boxes which I don't want.How can I differentiate?

(Tried adding id and class to igx-dialog tag didn't work)

.igx-dialog__window

position: relative;

min-width: 17.5rem;

border-radius: 4px;

background: #fff;

}

Parents

1560

Offline Teodosia Hristodorova posted over 2 years ago

Hello,

I have been looking into your question and my suggestion in order to apply different styles to the dialogs is to use themes that extend the igx-dialog-theme. More about IgxDialog Styling could be found here.

Also, a list of all parameters included into the dialog theme could be found here.

Additionally, I have prepared a small sample with two dialogs that are styled differently and it could be found here.

Please test it on your side and let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Associate Software Developer
Cancel
Reply

Cancel
185

Offline arsv M posted over 2 years ago in reply to Teodosia Hristodorova

Thanks for the sample code.

I have added styling as below in .scss file:

$my-discard-theme: igx-dialog-theme(

  $background: #011627,

  $title-color: #ecaa53,

  $message-color: #fefefe,

  $border-radius: 0.3

);

:host {

  .overlay1 {

    ::ng-deep {

      @include igx-dialog($my-discard-theme);

    }

  }



}

But I am getting below error:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

$my-discard-theme: igx-dialog-theme(
^
Plain CSS functions don't support keyword arguments.
╷
487 │ $my-discard-theme: igx-dialog-theme(
│ ┌────────────────────^
488 │ │ $background: #011627,
489 │ │ $title-color: #ecaa53,
490 │ │ $message-color: #fefefe,
491 │ │ $border-radius: 0.3
492 │ │ );
│ └─^
╵
stdin 487:20 root stylesheet
Cancel
Reply

Cancel

Reply

2500

Offline Bozhidara Pachilova posted over 2 years ago in reply to arsv M

Hello,

Thank you for following up.

As the sample, provided by Teodosia demonstrates styling the dialog windows working correctly, this indicates a possible issue with your project environment.

In an effort to reproduce this error I ran the sample locally. It did successfully compile, however I was able to reproduce the same error by omitting the following import in the _variables.scss file:

@import '~igniteui-angular/lib/core/styles/themes/index';

As you can read from the Dialog Window’s topic Styling section here, the imported index file is where all the theme functions and component mixins live. So, my suggestion is to import it. Additionally, you could refer to the StackBlitz sample for other style configurations as well.

Please, test this suggestion on your side and let me know if it resolves your issue. Alternatively, if the error persists, it would be very helpful if you can provide an isolated sample, where this behavior is reproduced, so I can investigate it further.

Thank you for your cooperation.

Sincerely,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel

Children

No Data