У меня есть таблица с сортировкой ушко технологии glyphicons в заголовке. Значок отображается, только если в таблице отсортированы в этот конкретный заголовок. Когда я щелкните ячейку, это изменения размеров таблицы. Таблица является динамической, поэтому я'предпочту не фиксируя размеры ячеек. Есть ли способ я могу поставить место там занимает место glyphicon?
Я знаю, как код JavaScript будет работать, чтобы скрыть это, я просто не'т знаю, как это сделать в CSS, чтобы дать срок какой-то размер.
(это в Bootstrap 3.0 кстати)...
<span class="glyphicon glyphicon-arrow-down"><span>
это особый значок. Хром говорит, что это'с широким 16px и, когда отображается.
Реальный проект является немного сложнее, здесь'ы plunkr:
Я Дон'т думаю, что там'ы пробельный символ в шрифт glyphicon.
Почему Дон'т вы просто использовать прозрачный цвет шрифта?
.glyphicon-none:before {
content: "\2122";
color: transparent !important;
}
В \2122-это минус. Использовать его как обычный значок:
<i class="glyphicon glyphicon-none"></i>
Была такая же проблема, но также с помощью AngularJS. Я'вэ сделать следующее, чтобы решить проблему.
добавить новый класс в CSS
.glyphicon-hide {
color: transparent;
}
Затем в шаблон я могу использовать
<i class="glyphicon glyphicon-arrow-down" ng-class="{'glyphicon-hide': conditionValue}></i>
Что помогло мне было задание стиля таблицы стиль="в таблицу-макет: фиксированная"` в. После этого, ширину столбцов в моей таблице осталась прежней, был ли значок отображается рядом с заголовком столбца или нет.
Здесь'ы код таблицы:
<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>
Функцию заказа () устанавливает orderReverse в orderType
переворачивает`. С помощью
НГ-шоу, стрелка отображается в заголовке только если таблица отсортирована по этому столбцу. Нет необходимости в невидимую glyphicon или что-нибудь подобное.