Progress Bar Text in Bootstrap 3 schneidet

Question

Ich habe eine Rails-Anwendung, wo ich Bootstrap für Styling verwenden. Ich benutze Bootstrap 3, um Prozent abgeschlossen zusammen mit dem Status der Aufgabe in einem Bootstrap 3 Fortschrittsbalken anzuzeigen. Der Text innerhalb der Leiste zeigt an, ob der Fortschrittsbalken den größten Teil der Breite der Leiste ausfüllt. Für die niedrigeren Prozentsätze wird der Text jedoch abgeschnitten. Bitte sehen Sie sich den beigefügten Screenshot an.

Der Rails-Code ist ziemlich einfach, den Fortschrittsbalken zu rendern. Hier ist es der Vollständigkeit halber:

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 

Bitte beraten Sie, wie Sie den abgeschnittenen Text sichtbar machen. Der zweite Balken, der 48,0% zeigt - ist wirklich 48,0% - Aktiv.

Aus irgendeinem Grund ist der verbleibende Text nicht sichtbar. Beachten Sie auch, dass es mir nichts ausmacht, die Hintergrundfarbe oder die Textfarbe (zum Beispiel Schwarz) zu ändern, um den Text sichtbar zu machen. Die einzige Einschränkung besteht darin, dass die angezeigte grüne Farbe grün sein muss. Der Fortschrittsbalken emuliert das Ampelmuster (grün/gelb/rot), um anzuzeigen, ob sich eine Aufgabe innerhalb der Fertigstellungszeit befindet, sich der Fertigstellung nähert oder nach dem Fälligkeitsdatum liegt.

Ich fand eine Reihe von Referenzen auf Google und versuchte sie, keiner von ihnen funktionierte. Die Min-Wide-Lösung wird nicht funktionieren, da die Menge an Text, die angezeigt werden soll, mehr ist, als in Min-Breite aufgenommen werden kann.

Vielen Dank im Voraus für Ihre Zeit.

Answer 1

gebe # {show_text} innerhalb des span-Tag wie

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

dann

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

zu beachten, dass aktuelle Browser die unten Stil hinzufügen, die den text-shadow-Eigenschaft unterstützen.

Referenz für text-shadow Eigenschaft http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Sie können die Farbe des Textes innerhalb des span-Tag