How to add custom css class on vFlow elements or components

vFlow
,
1

I want to customize the look and feel of a card. What are the ways to do that?

Firstly,

  1. We can customise it’s basic look and feel in UI Properties section.
  2. Can provide Data style, Label style and Animation style.
  3. Another option we have is to apply CSS(Cascading Style Sheets).
    We can apply css on App level, Page level, Component level and Element level.

Steps are:

  1. We need to write the CSS and then apply it in the vflow.
    Example css :
mat-dialog-container.mat-dialog-container .card-header.group-header {
    position: absolute;
    right: -40px;
    top: -32px;
    z-index: 2;
    padding: 0;
}
mat-dialog-container.mat-dialog-container .card-header.group-header .link-btn {
    display: flex;
}
mat-dialog-container.mat-dialog-container .card.card-group.position-inherit .card-header.group-header {
    position: static;
}

For Reference :
For Reference :1920×1080 103 KB

1 Like
2

I want to customize the look and feel of a card. What are the ways to do that?

Firstly,

  1. We can customise it’s basic look and feel in UI Properties section.
  2. Can provide Data style, Label style and Animation style.
  3. Another option we have is to apply CSS(Cascading Style Sheets).
    We can apply css on App level, Page level, Component level and Element level.

Steps are:

  1. We need to write the CSS and then apply it in the vflow.
    Example css :
mat-dialog-container.mat-dialog-container .card-header.group-header {
    position: absolute;
    right: -40px;
    top: -32px;
    z-index: 2;
    padding: 0;
}
mat-dialog-container.mat-dialog-container .card-header.group-header .link-btn {
    display: flex;
}
mat-dialog-container.mat-dialog-container .card.card-group.position-inherit .card-header.group-header {
    position: static;
}

For Reference :
For Reference :1920×1080 103 KB