बूटस्ट्रैप 3 में प्रोग्रेस बार टेक्स्ट

Question

में कटौती करता है मेरे पास रेल अनुप्रयोग है जहां मैं स्टाइल के लिए बूटस्ट्रैप का उपयोग करता हूं। बूटस्ट्रैप 3 प्रगति पट्टी में कार्य स्थिति के साथ प्रतिशत पूर्ण दिखाने के लिए मैं बूटस्ट्रैप 3 का उपयोग करता हूं। बार के भीतर का पाठ ठीक दिखाता है अगर प्रगति बार बार की चौड़ाई को भरता है। हालांकि, निचले प्रतिशत के लिए, पाठ कटा हुआ हो जाता है। कृपया संलग्न स्क्रीनशॉट देखें।

रेल कोड प्रगति पट्टी प्रस्तुत करने के लिए अपेक्षाकृत सरल है। यहाँ यह पूर्णता के लिए है:

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 

कृपया टेक्स्ट कटा दृश्यमान बनाने के लिए पर सलाह। दूसरी बार जो 48.0% दिखाती है - वास्तव में 48.0% है - सक्रिय।

किसी कारण से शेष पाठ दिखाई नहीं दे रहा है। यह भी ध्यान रखें कि टेक्स्ट को दृश्यमान बनाने के लिए मुझे पृष्ठभूमि रंग या टेक्स्ट रंग (उदाहरण के लिए काला) को बदलने में कोई फर्क नहीं पड़ता। एकमात्र बाधा यह है कि प्रदर्शित हरा रंग हरा होना चाहिए। प्रगति पट्टी यातायात प्रकाश पैटर्न (हरा/पीला/लाल) को यह दिखाने के लिए अनुकरण करती है कि कोई कार्य पूरा होने के भीतर है या नहीं, पूरा होने के करीब या देय तिथि से पहले है।

मुझे Google पर कई संदर्भ मिले और उनमें से कोई भी काम नहीं किया। न्यूनतम चौड़ाई समाधान मेरे लिए काम नहीं करेगा क्योंकि टेक्स्ट प्रदर्शित होने की मात्रा न्यूनतम चौड़ाई में समायोजित की जा सकती है।

आपके समय के लिए अग्रिम धन्यवाद।

Answer 1

तरह

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

स्पैन टैग के अंदर # {show_text} रखो तो नीचे दिए गए शैली

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

नोट जोड़ने कि नवीनतम ब्राउज़र है कि पाठ-छाया संपत्ति समर्थन करते हैं। पाठ छाया संपत्ति http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

के लिए

संदर्भ आप स्पैन टैग