ruby on rails 4 - rails - El texto de la barra de progreso en Bootstrap 3 corta

sprockets-rails

Question

Tengo una aplicación de rieles donde utilizo Bootstrap para el diseño. Uso el programa de arranque 3 para mostrar el porcentaje completado junto con el estado de la tarea en una barra de progreso de arranque 3. El texto dentro de la barra se muestra bien si la barra de progreso llena la mayor parte del ancho de la barra. Sin embargo, para los porcentajes más bajos, el texto se corta. Por favor, vea la captura de pantalla adjunta.

El código Rails es bastante simple para representar la barra de progreso. Aquí está para completar:

  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

Indique cómo hacer que el texto recortado sea visible. La segunda barra que muestra 48.0% - es realmente 48.0% - Activa.

Por alguna razón, el texto restante no está visible. También tenga en cuenta que no me importa cambiar el color de fondo o el color del texto (negro, por ejemplo) para que el texto sea visible. La única restricción es que el color verde que se muestra debe ser verde. La barra de progreso emula el patrón de semáforo (verde / amarillo / rojo) para mostrar si una tarea está dentro del tiempo de finalización, acercándose a la finalización o pasada la fecha de vencimiento.

Encontré varias referencias en Google y las intenté, ninguna de ellas funcionó. La solución de mínimo ancho no funcionará para mí, ya que la cantidad de texto que se mostrará es mayor que la que se puede acomodar en min-width.

Gracias de antemano por tu tiempo.

Answer 1

Coloque el # {show_text} dentro de la etiqueta span como

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

luego agrega el estilo de abajo

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

tenga en cuenta que los navegadores más recientes admiten la propiedad text-shadow.

referencia para la propiedad text-shadow http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

es posible que desee cambiar el color del texto dentro de la etiqueta span