0

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>

2
  • Could you add some code?
    – vanntile
    Jul 25, 2015 at 9:06
  • @Vann'TileIanito added.
    – Beginner
    Jul 25, 2015 at 9:16

3 Answers 3

1

<!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>

1
0

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

1
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.