将内部类样式更改为溢​​出：对于特定类可见（对于PrimeNG）

Question

This question is specific to PrimeNG or angular2 components. Their styles are hidden but on documentation page they mention, although quite vaguely. Here is url: http://www.primefaces.org/primeng/#/dialog

How could one change styles of a component?

For example for Dialog component we have style and styleClass:

style       string  null    Inline style of the component.
styleClass  string  null    Style class of the component.

Also we have a class ui-dialog-content Content element .

Now I want to change for ui-dialog-content overflow style to visible. What should I do?

This is quite unclear from documentation.

I have tried create a class

.dialog-overflow{
  overflow: visible;
}

and set <p-dialog styleClass="dialog-overflow" ... but that obviously does not work as it is not correct class (ui-dialog-content).

Update: I have tried with no success this option also:

.dialog-overflow .ui-dialog-content {
  overflow: visible;
}    

and this:

.dialog-overflow >>> .ui-dialog-content {
  overflow: visible;
}    

Answer 1

You can use the class you already have:

.ui-dialog-content {
    overflow: visible;
}

---

But I believe you are making a mistake here. The class is not set using styleClass="abc" but using class="abc" . But I'm not overly proficient in angular, so I'm basing my knowledge on HTML.

So you should do the following:

<p-dialog class="dialog-overflow"></p-dialog>

And use the CSS you provided before:

.dialog-overflow{
    overflow: visible;
}

Answer 2

Actually, this was solution.

p-dialog >>> .ui-dialog-content {
  overflow: visible;
}    

p-dialog >>> .ui-dialog{
  overflow: visible;
}    

Double overflow for this component to go through two nested divs.