I want to modify the maximum value of my progress bar

CSS, XHTML/HTML & Javascript - Having trouble with CSS post your question here. Find solutions & discuss stylesheets, tutorials and techniques.
Post Reply
User avatar
BrittingLee
Newbie
Posts: 1
Joined: Tue Jan 07, 2020 10:46 pm

Hello,

I'm making a progress bar that is getting its values from some variables I have declared. When my aria-value now meets my aria-value max, there is still space left over in the progress bar since it fills the width of it to only 80% and not 100%. So I'm kind of stuck on a fix for this. Here's my Code:

Code: Select all

<?php 
      $current_players=$infosprp['players'];
      $max_players=$infosprp['places'];
      $width = $current_players;

      echo '<div class="progress w-25 m-auto" style="height: 30px;">
      <div class="font-weight-bold progress-bar bg-warning progress-bar-striped progress-bar-animated text-center" 
           role="progressbar" 
           aria-valuenow="'.$current_players.'"
           aria-valuemin="0" 
           aria-valuemax="'.$max_players.'"style="width:'.$width.'%;font-size:18px;">
           '.$width.'/'.$max_players.'
      </div>
    </div>'; 
?>


User avatar
alex
Junior Member
Posts: 13
Joined: Mon Aug 24, 2015 8:28 pm

The width of the process bar is 100%. In your image displaying 80% completed, so you use a new variable like

Code: Select all

$statusBar = ($current_players * 100) / $max_players;
Please see below example, I think it's should work for you.

Code: Select all

<?php 
          $current_players=$infosprp['players'];
          $max_players=$infosprp['places'];
          $width = $current_players;
          $statusBar = ($current_players * 100) / $max_players;

          echo '<div class="progress w-25 m-auto" style="height: 30px;">
          <div class="font-weight-bold progress-bar bg-warning progress-bar-striped progress-bar-animated text-center" 
               role="progressbar" 
               aria-valuenow="'.$current_players.'"
               aria-valuemin="0" 
               aria-valuemax="'.$max_players.'"style="width:'.$statusBar.'%;font-size:18px;">
               '.$width.'/'.$max_players.'
          </div>
        </div>'; 
    ?>
Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest