Процентная метка индикатора выполнения загрузки Twitter

Я создал индикатор загрузки Twitter и поместил его в таблицу.
Но когда проценты низкие, метка не видна так: http://jsfiddle.net/mavent/w48qH/4/

В связи с этим рекомендуется добавить min-width: http://getbootstrap.com/components/#progress-label< /а>

Но добавление min-width делает длину индикатора выполнения нелогичной, все длины баров становятся одинаковыми: http://jsfiddle.net/mavent/w48qH/7/

Также столбцы таблицы находятся очень далеко друг от друга на больших экранах. Между первым столбцом и вторым столбцом слишком много места.

Каким будет лучший способ показать индикатор выполнения для небольших процентов? И лучше расположение для таблицы?


css twitter-bootstrap
person trante    schedule 19.02.2014    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Просто добавьте это в свой CSS:

.progress-bar {
    overflow-x:visible;
    white-space:nowrap;
    color:black; /* color is for demo purposes */
}

Нет необходимости редактировать HTML.

Это показывает метку без ущерба для прогрессивной цветной части индикатора выполнения.

Демо: http://jsfiddle.net/w48qH/9/

person Arbel    schedule 19.02.2014
comment
@icfantv Спасибо за упоминание мертвой ссылки. Поменял на рабочую ссылку. - person Arbel; 25.07.2014

arrow_upward
0
arrow_downward

Я думаю, что минимальная ширина может быть предназначена для содержимого внутри индикатора выполнения. Итак, взгляните на мой пример, построенный на вашей скрипке:

HTML:

<div class="progresslabel"> % 12</div><br>

CSS:

.progresslabel{

    min-width:40px;
}

JQuery:

$('.progresslabel').each(function(){
    if($(this).width() > $(this).parent().width()){
     $(this).css("color","black");   
    }
});

Теперь это, конечно, выглядит плохо, но это просто пример, вы можете делать с ним все, что хотите, но я надеюсь, что вы поняли идею.

Вот вам скрипка:

http://jsfiddle.net/6fLk8/3/

person Bryce Easley    schedule 19.02.2014

arrow_upward
0
arrow_downward

Ответ @Arbel сильно недооценен. Я проверил много сообщений stackoverflow, пока не нашел его ответ.

Также важно добавить !important в изменения, которые он предложил, иначе код не будет работать (в моей работе с использованием react bootstrap этого не было до добавления !important)

person bitmover    schedule 09.06.2021
comment
На самом деле это не дает ответа на вопрос. Вы можете лучше проголосовать за ответ Арбеля или за сам вопрос. - person Sven Eberth; 10.06.2021
comment
Кроме того, !important, как обычно, является плохой практикой, лучше использовать селектор с более высоким уровнем специфичности А может быть только индивидуальная проблема. - person Sven Eberth; 10.06.2021