Twitter Bootstrap Question posted in

Twitter Bootstrap: Label cut off in stacked progress bar

My problem is when i use a stacked progress bar and the sections are too small the text inside is cut of.
Using the min-with breaks the progress bar.
Is there a way to solve the problem?

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" style="width:1%;">
    <span style="color:black">Long long text</span>
  </div>
  <div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" style="width:99%;">
    <span style="color:black">Long long text</span>
  </div>
</div>
Tags:

2

Answers


  1. 0

    I would suggest have a look at this css3 text-overflow property

    CSS3 text-overflow Property

    might come handy

    Login or Signup to reply.
  2. 0

    I have a little Jquery workaround for you:

    Jquery

    $.fn.textWidth = function () {
        var html_org = $(this).html();
        var html_calc = '<span>' + html_org + '</span>';
        $(this).html(html_calc);
        var width = $(this).find('span:first').width();
        $(this).html(html_org);
        return width;
    }
    var progress = $(".show");

    progress.each(function () {

        $("#tempDiv").text($(this).text());
        var textW = $("#tempDiv").textWidth();

        $("#tempDiv").text("");
        $(this).css({
            "min-width": textW + "px"
        });

    });

    HTML

    <div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 5%;">
        <span class="show" style="color:black; position: relative">test</span>
    </div>
<div class="progress-bar progress-bar-danger" style="width:95%;">
    <span class="show" style="color:black; position: relative">test 1</span>
</div>
</div><div id="tempDiv"></div>

    Get the Text with Jquery, save it temporally in another div and get the Text-width. At the end you can give every progress-bar the min-width.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search