Bootstrap 3 runtime text is disabled

Question

I have a rails application where I use Bootstrap for styling. I use bootstrap 3 to show that the percentage is complete along with the task status in the bootstrap 3 control line. The text in the line is displayed in good condition if the progress bar fills most of the bandwidth. However, for lower percentages, the text is cut off. See the attached screenshot.

Rails code is pretty simple to display a progress bar. Here 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 how to make cut text visible. The second bar, which shows 48.0% - really 48.0% - Active.

For some reason, the remaining text is not displayed. Also note that I am not opposed to changing the background color or text color (e.g. black) to make the text visible. The only limitation is that the displayed green color must be green. The progress bar emulates a traffic light pattern (green / yellow / red) to indicate whether the task is within completion time, is nearing completion, or is past due.

I found several links on Google and tried them, but none of them worked. The min-width solution will not work for me, as the amount of text displayed is larger than can be placed in the minimum width.

Thank you in advance for your time.

Answer 1

Put # {show_text} inside the span tag, for example

 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 style below

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

Please note that recent browsers that support the text-shadow property,

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

you can change the color of the text inside the span tag