web-dev-qa-db-fra.com

Espace réservé vide pour le glyphicon bootstrap

J'ai une table avec le tri des glyphicons bootstrap dans l'en-tête. L'icône n'est affichée que si la table est triée en fonction de cet en-tête. Lorsque je clique sur la cellule, la taille du tableau change. La table est dynamique, je préférerais donc ne pas fixer la taille des cellules. Est-il possible de placer un paramètre fictif à la place du glyphicon?

Je sais comment le javascript fonctionnera pour le cacher, je ne sais tout simplement pas comment faire le css pour donner une certaine taille à la durée.

(c'est bootstrap 3.0 btw) ...

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

est l'icône particulière. Chrome indique qu'il fait 16 pixels de large lorsqu'il est affiché. 

Le projet actuel est un peu plus compliqué, voici un plunkr:

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

htmlcsstwitter-bootstrap
44
Snowburnt

Je ne pense pas qu'il y ait un caractère d'espace dans la police glyphicon .

Pourquoi n'utilisez-vous pas simplement une couleur de police transparente?

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

Le\2122 est un signe moins. Utilisez-le comme une icône normale:

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

Il suffit de masquer l'élément de l'icône avec visibility: hidden;. Par exemple.

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

Avait le même problème, mais utilisait aussi angularJs. J'ai fait ce qui suit pour résoudre le problème. 

ajouter une nouvelle classe à css

.glyphicon-hide {
    color: transparent;
}

Ensuite, dans le modèle, je peux utiliser

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

Ce qui m'a aidé, c'est de définir le style de la table sur style="table-layout: fixed". Après cela, la largeur des colonnes de ma table est restée la même, qu'une icône soit affichée à côté de l'en-tête de la colonne ou non.

Voici le code de la table:

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

La fonction order() définit la variable orderType et inverse orderReverse. À l'aide de ng-show, une flèche est affichée sur l'en-tête uniquement si le tableau est trié en fonction de cette colonne. Pas besoin d'un glyphicon invisible ou quelque chose comme ça.

0
Jim Holden