Progress Bar text in Bootstrap 3 cuts off

Question

I have a rails application where I use Bootstrap for styling. I use bootstrap 3 to show percent complete along with the task status in a bootstrap 3 progress bar. The text within the bar shows fine if the progress bar fills up most of the width of the bar. However, for the lower percentages, the text gets chopped off. Please see the attached screenshot.

The Rails code is rather simple to render the progress bar. Here it is for completeness:

  def progress_bar(todate_units, total_units, completion_date, checkpoint_status)
    if (total_units.nil? || (total_units == 0) || completion_date.blank?)
      return ""
    end
    # compute percent complete
    todate_units = (todate_units.nil? ? 0 : todate_units)
    if (checkpoint_status.present? && (checkpoint_status == 'QC Complete'))
      percent_complete = 100
    else
      percent_complete = ((todate_units / total_units.to_f) * 0.8).round(2) * 100
    end
    # determine status
    if (checkpoint_status.present? && (checkpoint_status == 'QC Complete'))
      status = 'QC Complete'
    elsif (todate_units == 0)
      status = "Pending"
    elsif ((todate_units > 0) and (todate_units < total_units))
      status = "Active"
    elsif (todate_units == total_units)
      status = "Testing Complete"
    else
      status = "Unknown"
    end
    show_text = "#{percent_complete} % - #{status}"
    d = Date.today()
    if (completion_date < d)
      which_bar = (status == 'QC Complete') ? "progress-bar-success" : "progress-bar-danger"
    elsif ((completion_date >= d.beginning_of_week) and (completion_date <= d.end_of_week))
      which_bar = (status == 'QC Complete') ? "progress-bar-success" : "progress-bar-warning"
    elsif (completion_date > d.end_of_week)
      which_bar = "progress-bar-success"
    else
      which_bar = (status == 'QC Complete') ? "progress-bar-success" : "progress-bar-danger"
    end

    ret_str = "<div class='progress'><div class='progress-bar #{which_bar}' role = 'progressbar' " + 
              "aria-valuenow='#{percent_complete}' aria-valuemin='0' aria-valuemax='100' " +
              "style='width: #{percent_complete}%;'>#{show_text}</div></div>"
    ret_str
  end

Please advise on how to make the cut off text visible. The second bar which shows 48.0 % - is really 48.0 % - Active.

For some reason the remaining text is not visible. Also note that I do not mind changing the background color or the text color (black for instance) to make the text visible. The only constraint is that the green color displayed has to be green. The progress bar emulates the traffic light pattern (green/yellow/red) to show if a task is within completion time, approaching completion or is past the due date.

I found a number of references on Google and tried them none of them worked. The min-width solution will not work for me since the amount of text to be displayed is more than that can be accommodated in min-width.

Thanks in advance for your time.

Answer 1

Put the #{show_text} inside the span tag like

ret_str = "<div class='progress'><div class='progress-bar #{which_bar}' role = 'progressbar' " + 
              "aria-valuenow='#{percent_complete}' aria-valuemin='0' aria-valuemax='100' " +
              "style='width: #{percent_complete}%;'><span>#{show_text}</span></div></div>"

then add the below style

.progress-bar span
{
position: absolute;
text-shadow: 1px 1px 3px black;
}

note that latest browsers that support the text-shadow property.

reference for text-shadow property http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

you might want to change color of the text inside the span tag