Бланк-заполнитель для бутстрапа-глификона

У меня есть таблица с сортировкой бутстрапов-глификонов в заголовке. Значок отображается только в том случае, если таблица сортируется по этому конкретному заголовку. Когда я нажимаю на ячейку, она меняет размер таблицы. Таблица динамична, поэтому я бы предпочел не фиксировать размеры ячеек. Есть ли способ разместить там местозаполнитель, который заменит глификон?Бланк-заполнитель для бутстрапа-глификона

Я знаю, как javascript будет работать, чтобы скрыть его, я просто не знаю, как сделать css, чтобы дать диапазон некоторого размера.

(это самозагрузка 3.0 кстати) ...

<span class="glyphicon glyphicon-arrow-down"><span>

является особенно значком. Chrome говорит, что при отображении он имеет ширину 16 пикселей.

Реальный проект является немного более сложным, вот plunkr:

http://plnkr.co/edit/N6nkW3e4gDdpQdtRC8ue?p=preview

источник

2013-10-25 Snowburnt

Вам необходимо обернуть его в div, на котором есть интервал, или для версии 3 col-lg- # - если вы разместите больше кода, я могу быть более конкретным. –

добавил plunkr, чтобы вы могли видеть, что происходит – Snowburnt

вы не можете изменить цвет значка в соответствии с фоном? – Tarik

Я не думаю, что это символ пробела в glyphicon font.

Почему бы вам просто не использовать прозрачный цвет шрифта?

.glyphicon-none:before { 
    content: "\2122"; 
    color: transparent !important; 
}

\ 2122 - знак минуса. Используйте его, как обычный значок:

<i class="glyphicon glyphicon-none"></i>

источник

2014-04-07 13:06:10 Riga

, это должен быть ответ, это именно то, что я искал! –

Точно то, что я искал! Только я использовал 'content:" \ e094 ";' (стрелка вниз), так что мой интервал не изменился вообще. – nbering

Интересно, что юникод имеет соответствующие символы пробела в/620 и/1879, поэтому вы можете использовать эти коды без правила прозрачности. –

Если у вас такая же проблема, но также использовался угловойJs. Для решения проблемы я сделал следующее.

добавить новый класс CSS

.glyphicon-hide { 
    color: transparent; 
}

Затем в шаблоне можно использовать

<i class="glyphicon glyphicon-arrow-down" ng-class="{'glyphicon-hide': conditionValue}></i>

источник

2016-03-01 22:07:49 Vitaly

Просто скрыть элемент значка с visibility: hidden;. Например.

<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>

источник

2016-03-11 22:53:07 nick

Что помогло мне заходило стиль таблицы style="table-layout: fixed". После этого ширина столбцов моей таблицы осталась прежней, независимо от того, был ли значок показан рядом с заголовком столбца или нет.

Вот код таблицы:

<table class="table table-hover" style="table-layout: fixed;"> 
<thead> 
    <tr> 
    <th ng-click="order('col1')"> 
     Column Header 1 
     <span class="glyphicon" ng-show="orderType == 'col1'" 
     ng-class="orderReverse ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span> 
    </th> 
    <th ng-click="order('col2')"> 
     Column Header 2 
     <span class="glyphicon" ng-show="orderType == 'col2'" 
     ng-class="orderReverse ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span> 
    </th> 
    </tr> 
</thead> 
<tbody> 
    ... 
</tbody> 
</table>

order() функция устанавливает orderType и переворачивает orderReverse. С помощью ng-show стрелка отображается в заголовке только в том случае, если таблица сортируется по этому столбцу. Нет необходимости в невидимом глификоне или что-то в этом роде.

источник

2016-03-30 14:28:02

Бланк-заполнитель для бутстрапа-глификона

ответ

Смежные вопросы