CODEWITHSUNDEEP
htmlcssangulartypescript
John w.
John w.

Reputation: 531

Progress bar repeating percentages

I developed a responsive progress bar, however the progress values ​​are repeated. Only the central value should appear.

Does anyone know how I can solve this?

DEMO

 <div id="tab1">
      <dx-data-grid class="tableTask" [dataSource]="datas" [showColumnLines]="false"
        [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="false">
        <dxo-header-filter [visible]="true"></dxo-header-filter>
        <dxo-remote-operations [sorting]="true" [paging]="true" [filtering]="true"></dxo-remote-operations>
        <dxo-paging [pageSize]="200"></dxo-paging>
        <dxi-column dataField="id" caption="ID" [width]="100" [allowFiltering]="false" [allowSorting]="false"></dxi-column>
        <dxi-column dataField="name" caption="Name"></dxi-column>
        <dxi-column dataField="surname" caption="Surname"></dxi-column>
           <dxi-column dataField="progress" cellTemplate="Progress" caption="Progress"></dxi-column>
            <div *dxTemplate="let data of 'Progress'">
          <div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text">{{data.key.progress}} %</div>
            <div class="progress-bar" [style.width]="data.key.progress + '%'">
              <div class="progress-text">{{data.key.progress}} %</div>
            </div>
          </div>
            </div>
      </dx-data-grid>
    </div>

Image

Upvotes: 0

Views: 132

Answers (3)

Amir Nadiri
Amir Nadiri

Reputation: 1

I think you want to just display the white text.

In order to do that, you need to remove line 15 in app.component.html file and add a large z-index to class progress-text

Upvotes: 0

Awais
Awais

Reputation: 4912

Just remove this line <div class="progress-text">{{data.key.progress}} %</div> from below code for bar % the white one, and remove <div class="progress-text">{{data.key.progress}} %</div> inside progress-bar for bar %

<div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text">{{data.key.progress}} %</div>
            <div class="progress-bar" [style.width]="data.key.progress + '%'">
              <div class="progress-text">{{data.key.progress}} %</div>
            </div>
          </div>

Upvotes: 0

Oussail
Oussail

Reputation: 2288

I removed the percent value inside the progress bar and added z-index.

This should do the trick : 

 <div id="tab1">
      <dx-data-grid class="tableTask" [dataSource]="datas" [showColumnLines]="false"
        [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="false">
        <dxo-header-filter [visible]="true"></dxo-header-filter>
        <dxo-remote-operations [sorting]="true" [paging]="true" [filtering]="true"></dxo-remote-operations>
        <dxo-paging [pageSize]="200"></dxo-paging>
        <dxi-column dataField="id" caption="ID" [width]="100" [allowFiltering]="false" [allowSorting]="false"></dxi-column>
        <dxi-column dataField="name" caption="Name"></dxi-column>
        <dxi-column dataField="surname" caption="Surname"></dxi-column>
           <dxi-column dataField="progress" cellTemplate="Progress" caption="Progress"></dxi-column>
            <div *dxTemplate="let data of 'Progress'">
          <div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text" style="z-index:2">{{data.key.progress}} %</div>
            <div class="progress-bar" style="z-index:1" [style.width]="data.key.progress + '%'">
            </div>
          </div>
            </div>
      </dx-data-grid>
    </div>

Upvotes: 2

Related Questions