CODEWITHSUNDEEP
jqueryhtmlcss
MJMacarty
MJMacarty

Reputation: 537

trouble displaying progressbar inline

I am trying to get a jQuery UI progressbar to display inline so the output should be:

Percent Complete: {{progressbar}} 25%

I have tried variations of the following with no luck (I really thought it was going to work when I put everything in its very own div):

I get:

Percent Complete: {{Progressbar}} 25%

<p id="percent-complete" class="status" style="display:inline;">

Percent Complete: 

</p>
<div id="progress-container" style="width:125px; display:inline">

<div id="progress" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="height:10px;      width:100px;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25"></div>
<span id="complete-text" class="status-update" style="display:inline;"></span>

</div>

Is there some reason why you can't display progressbars inline? Am I just missing something here? Is there something to be done about this situation? Thanks for any assistance.

Upvotes: 0

Views: 1143

Answers (2)

Vivek Sharma
Vivek Sharma

Reputation: 597

You may be using Bootstrap 2 and using style/class of Bootstrap 3 or vice-versa. Please use Bootstrap 2 style for progressive bar if you are using Bootstrap 2 or Bootstrap 3 style/class for Bootstrap 3.

Bootstrap 2 style:

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

for more detail please checkout this link: http://getbootstrap.com/components/

Bootstrap 3 style:

<div class="bs-component">
       <div class="progress progress-striped active">
          <div style="width: 45%" class="progress-bar"></div>
       </div>
    <div class="btn btn-primary btn-xs" id="source-button" style="display: none;">&lt; &gt;</div></div>

for more detail please checkout this link: http://bootswatch.com/cerulean/

Another fact is that you may also missing jQuery-UI, js and css. Please try to attach by following cdn: 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

Upvotes: 1

Ben D
Ben D

Reputation: 77

Add display: inline-block to the progress bar div.

jsfiddle example: http://jsfiddle.net/m2nDG/

Upvotes: 1

Related Questions