Dataloader

Post Reply
tbegsr
Posts: 11
Joined: 25 Jul 2016, 18:07
Location: Suisse

16 Dec 2018, 10:30

I need a data loader in my application

I try the following
<p-dialog [(visible)]="ProgressSpinnerDlg" styleClass="ui-dialog-transparent" [closable]="false"
[showHeader]="false" [resizable]="false" [modal]="true">
<p-progressSpinner></p-progressSpinner>
</p-dialog>

.ui-dialog-transparent .ui-widget-content
{
background-color:transparent;
border-width: 0px 0px 0px 0px;
border-color:transparent;
}


But unfortunately transparent is not working (red as example works fine, but I've also still a border with an other colour)
Any idea to make it working or an other solution to create a data loader?

merve7
Posts: 488
Joined: 12 Sep 2017, 10:44

17 Dec 2018, 10:32

Hi,
Firstly, could you try 'contentStyle' for changing the dialog content section?
Also, you can override in styles.scss or src/assets/sass/overrides/_theme_styles.scss file, like the below code;

Code: Select all

.ui-dialog.ui-widget-content
{
    background-color:transparent;
    border-width: 0px 0px 0px 0px;
    border-color:transparent;
}

tbegsr
Posts: 11
Joined: 25 Jul 2016, 18:07
Location: Suisse

17 Dec 2018, 21:45

Many thanks for the response
I found an other solution in the internet


<div class="loading-indicator" *ngIf="ProgressSpinnerDlg">
<p-progressSpinner></p-progressSpinner>
</div>

.loading-indicator {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

/* Transparent Overlay */
.loading-indicator:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.53);
}

This works very well for me
Regards Rolf

merve7
Posts: 488
Joined: 12 Sep 2017, 10:44

18 Dec 2018, 08:41

Glad to hear that :)

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests