CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Beginner
Beginner

Reputation: 710

Bootstrap Progress bar background-color issue

I have bootstrap progress bar inside my accordion panel. I want to change the backgroud-color of progress bar. but it is taking background color of the accordion panel. It takes the background-color when i give static value but not with the less variable.

<div class="panel">
  <div class="panel-heading>
    <h3 class="panel-title">
        <div class="progress-broad">
            <div class="progress-bar progress-bar-success progress-bar-striped"
                 ng-style="width:50%">
            </div>
        </div>
     </h3>
 </div>

EDIT: The issue here was my progress bar stopped/Not taking the background color dynamically. I had multiple progress bars which were showing background color lighter than their respective progress bar completed color (which we show by providing width). I made some changes because of which the background started showing the color of element behind it instead of the color it was getting dynamically. Setting the background color to any random color was not the requirement

Solution: I found that in doing the changes I removed the class="progress". So I added the progress class again and It worked. If anyone faces similar kind of problem make sure the class="progress" is there.

Working code: 

<div class="panel">
  <div class="panel-heading>
    <h3 class="panel-title">
        <div class="progress">
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success progress-bar-striped"
                     ng-style="width:50%">
                </div>
            </div>
        </div>
    </h3>
</div>

Upvotes: 0

Views: 2691

Answers (3)

Samarth Shrivastava
Samarth Shrivastava

Reputation: 17

Hope this will help you.

<!DOCTYPE html>
<html>
<head>
   <title>Progress Bar</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<h1>Sucess Progress Bar</h1>

<div class="progress progress-striped">
	<div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 60%;">
  	</div>
</div>

</body>
</html>

Upvotes: 0

BahaEddine Ayadi
BahaEddine Ayadi

Reputation: 987

You should stick to the bootstrap method to make the progress bar.

I changed the class from progressbar-broad to progressbar , and I added the attributes needed to define your progress bar.

Here's the example: Example

I see that you used ng-style, I think it's working with angularJS , or something like that (I don't know much about it) , so I made it just style, you can make it back in your server

Upvotes: 0

Farhad Manafi
Farhad Manafi

Reputation: 334

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.progress-bar
{
background-color: orange !important;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions