ruby on rails 4 - نص شريط التقدم في بوتستراب 3 يقطع



ruby-on-rails-4 twitter-bootstrap-3 (1)

ضع # {show_text} داخل علامة سبان مثل

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

ثم إضافة نمط أدناه

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

لاحظ أن أحدث المتصفحات التي تدعم الخاصية الظل النص.

مرجع خاصية نص الظل http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

قد ترغب في تغيير لون النص داخل علامة سبان

لدي تطبيق القضبان حيث يمكنني استخدام بوتستراب للتصميم. يمكنني استخدام بوتستراب 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٪ - نشط.

لسبب ما لن يكون النص المتبقي مرئيا. لاحظ أيضا أنني لا أمانع تغيير لون الخلفية أو لون النص (أسود على سبيل المثال) لجعل النص مرئيا. القيد الوحيد هو أن اللون الأخضر المعروضة يجب أن تكون خضراء. شريط التقدم يحاكي نمط إشارة المرور (أخضر / أصفر / أحمر) لإظهار ما إذا كانت المهمة في غضون وقت الانتهاء، تقترب من الانتهاء أو تجاوز تاريخ الاستحقاق.

لقد وجدت عددا من المراجع على غوغل وحاولت ألا يعمل أي منهم. والحل دقيقة العرض لن تعمل بالنسبة لي منذ كمية النص ليتم عرضها هو أكثر من ذلك يمكن استيعابها في دقيقة العرض.

شكرا مقدما على وقتك.





progress-bar