Vide de l'espace réservé pour le "bootstrap" glyphicon

J'ai une table avec tri bootstrap glyphicons dans l'en-tête. L'icône ne s'affiche que si le tableau est trié par cet en-tête particulier. Lorsque je clique sur la cellule, il change la taille de la table. Le tableau est dynamique, donc je préfère ne pas fixer la taille des cellules. Est-il possible que je peux mettre un espace réservé dans il y qui prend la place de la glyphicon?

Je sais comment le javascript de travail pour le cacher, je ne sais pas comment faire le css pour donner la durée de taille.

(c'est bootstrap 3.0 btw)...

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

est l'icône particulière. Chrome a dit que c'est 16px large lors de l'affichage.

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

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

  • vous avez besoin d'envelopper dans une div qui a une portée sur elle, ou pour la version 3 col-lg-# - si vous publiez plus de code, je peux être plus précis
  • ajout d'un plunkr de sorte que vous pouvez voir ce qu'il se passe
  • je ne peux pas vous changer la couleur de l'icône pour correspondre à l'arrière-plan?
  • Qu'il a fait...il se sent un peu artificiel, mais il fonctionne. Dû monter un ng de style, car il ne semble pas que vous pouvez avoir plusieurs ng-classe de directives ou de plusieurs expressions en une seule ng-directive de classe.
  • ressemble vous avez compris
  • Lambert ouais, tarik a droit. Il suffit de ne pas avoir de réponse
  • mis en œuvre cette même fonction et le même problème! essayait de ne pas se contenter de codage en dur une entretoise lorsqu'une colonne n'est pas triée

InformationsquelleAutor Snowburnt | 2013-10-25
  1. 76

    Je ne pense pas qu'il y a un caractère d'espacement dans le glyphicon police.

    Pourquoi ne pas simplement utiliser un transparent, la couleur de la police?

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

    L' \2122 est un signe moins. L'utiliser comme une icône de la normale:

    <i class="glyphicon glyphicon-none"></i>
    • cela devrait être la réponse, c'est exactement ce que je cherchais!
    • Exactement ce que je cherchais ainsi! Seulement, j'ai utilisé content: "\e094"; (la flèche vers le bas) de sorte que mes espacement n'a pas changé du tout.
    • fait intéressant, l'unicode des caractères d'espace à /620 /1879 de sorte que vous pouvez utiliser ces codes sans les règles de transparence
    • L'espacement n'était pas correct pour moi, jusqu'à ce que j'ai utilisé @Balrog30 la suggestion de la \e094 caractère.
    • visibility: hidden ont mieux fonctionné pour moi que la couleur de transparence
    • visibility:hidden fonctionne le mieux pour moi aussi.

    InformationsquelleAutor Riga
  2. 8

    Vient masquer l'icône de l'élément avec visibility: hidden;. E. g.

    <span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>
    InformationsquelleAutor nick
  3. 0

    Eu le même problème, mais a également été en utilisant angularJs. J'ai effectué les opérations suivantes pour résoudre le problème.

    ajouter la nouvelle classe css

    .glyphicon-hide {
    color: transparent;
}

    Ensuite dans le modèle que je peux utiliser

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

    Ce qui m'a aidé a été de définir le style de la table à style="table-layout: fixed". Après cela, les largeurs de colonne de mon tableau est resté le même, si une icône est affichée à côté de l'en-tête de colonne ou pas.

    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 order() fonction définit la orderType et retourne orderReverse. Avec l'aide de ng-show, une flèche apparaît sur l'en-tête uniquement si le tableau est trié en fonction de cette colonne. Pas besoin d'un invisible glyphicon ou quelque chose comme ça.

    InformationsquelleAutor Jim Holden