ヘッダーにグリフコンを並べ替えるbootstrap。 。テーブルは動的であるため、セルサイズを固定しない方がよいのですが、グリフィコンの代わりにプレースホルダーを配置する方法はありますか?
私はJavaScriptがそれを隠すためにどのように機能するかを知っていますが、スパンにある程度のサイズを与えるためにcssを行う方法がわかりません。
(これはbootstrap 3.0 btw)...
<span class="glyphicon glyphicon-arrow-down"><span>
特定のアイコンです。 Chromeは、表示時に幅が16ピクセルであることを示します。
実際のプロジェクトはもう少し複雑です、ここにプランカーがあります:
glyphicon font に空白文字があるとは思わない。
なぜ透明なフォント色を使用しないのですか?
.glyphicon-none:before {
content: "\2122";
color: transparent !important;
}
\ 2122はマイナス記号です。通常のアイコンのように使用します。
<i class="glyphicon glyphicon-none"></i>
visibility: hidden;
でアイコンの要素を非表示にするだけです。例えば。
<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>
同じ問題を抱えていましたが、angularJsも使用していました。この問題を解決するために次のことを行いました。
cssに新しいクラスを追加します
.glyphicon-hide {
color: transparent;
}
次に、テンプレートで使用できます
<i class="glyphicon glyphicon-arrow-down" ng-class="{'glyphicon-hide': conditionValue}></i>
私が助けたのは、テーブルのスタイルを_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
_を使用すると、テーブルがその列でソートされている場合にのみ、ヘッダーに矢印が表示されます。目に見えないグリフィコンなどは必要ありません。