Leerer Platzhalter für Bootstrap-Glyphikon

Lesezeit: 3 Minuten

Benutzer-Avatar
Verschneit

Ich habe eine Tabelle mit Sortierungs-Bootstrap-Glyphikonen in der Kopfzeile. Das Symbol wird nur angezeigt, wenn die Tabelle nach dieser bestimmten Überschrift sortiert wird. Wenn ich auf die Zelle klicke, ändert sich die Größe der Tabelle. Die Tabelle ist dynamisch, daher würde ich es vorziehen, die Zellengrößen nicht festzulegen. Gibt es eine Möglichkeit, einen Platzhalter dort einzufügen, der den Platz des Glyphicons einnimmt?

Ich weiß, wie das Javascript funktioniert, um es zu verbergen, ich weiß nur nicht, wie ich das CSS machen soll, um der Spanne eine gewisse Größe zu geben.

(Das ist übrigens Bootstrap 3.0) …

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

ist das besondere Symbol. Chrome sagt, dass es 16 Pixel breit ist, wenn es angezeigt wird.

Das eigentliche Projekt ist etwas komplizierter, hier ist ein Plunkr:

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

  • Sie müssen es in ein div einschließen, das eine Spanne enthält, oder für Version 3 col-lg-# – wenn Sie mehr Code posten, kann ich genauer sein

    – Matt Lambert

    25. Oktober 2013 um 20:01 Uhr

  • Plunkr hinzugefügt, damit Sie sehen können, was los ist

    – Schneeverbrannt

    25. Oktober 2013 um 20:12 Uhr

  • Können Sie die Farbe des Symbols nicht an den Hintergrund anpassen?

    – Tarik

    26. Oktober 2013 um 0:21 Uhr

  • @Tarik Das hat es getan … es fühlt sich ein wenig gekünstelt an, aber es funktioniert. Musste einen ng-Stil aufrüsten, da es nicht so aussieht, als könnten Sie mehrere ng-Klassen-Direktiven oder mehrere Ausdrücke in einer einzigen ng-Klassen-Direktive haben.

    – Schneeverbrannt

    26. Oktober 2013 um 2:25 Uhr

  • sieht aus, als hättest du es herausgefunden

    – Matt Lambert

    28. Oktober 2013 um 22:16 Uhr

Ich glaube nicht, dass es ein Leerzeichen in gibt Glyphicon-Schriftart.

Warum verwendest du nicht einfach eine transparente Schriftfarbe?

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

Das \2122 ist ein Minuszeichen. Verwenden Sie es wie ein normales Symbol:

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

  • das sollte die Antwort sein, das ist genau das, wonach ich gesucht habe!

    – Kat Lim Ruiz

    20. Juni 2014 um 22:01 Uhr

  • Genau das was ich auch gesucht habe! Nur ich benutzt content: "\e094"; (Pfeil nach unten), sodass sich mein Abstand überhaupt nicht änderte.

    – Nummerierung

    10. Juli 2014 um 1:55 Uhr

  • Interessanterweise hat Unicode bei /620 und /1879 entsprechende Leerzeichen, sodass Sie diese Codes ohne die Transparenzregel verwenden können

    – Meori Oransky

    7. Januar 2015 um 22:31 Uhr

  • Der Abstand war für mich nicht korrekt, bis ich den Vorschlag von @ Balrog30 verwendet habe \e094 Charakter.

    – Sharlike

    24. April 2015 um 21:46 Uhr


  • visibility: hidden funktionierte besser für mich, dass transparente Farbe

    – Furgas

    13. September 2016 um 12:04 Uhr

Blenden Sie einfach das Element des Symbols mit aus visibility: hidden;. Z.B

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

Hatte das gleiche Problem, benutzte aber auch angleJs. Ich habe Folgendes getan, um das Problem zu beheben.

css neue klasse hinzufügen

.glyphicon-hide {
    color: transparent;
}

Dann in Vorlage kann ich verwenden

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

Benutzer-Avatar
Jim Holden

Was mir geholfen hat, war das Einstellen des Stils der Tabelle style="table-layout: fixed". Danach blieben die Spaltenbreiten meiner Tabelle gleich, unabhängig davon, ob neben der Spaltenüberschrift ein Symbol angezeigt wurde oder nicht.

Hier ist der Code der Tabelle:

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

Das order() Funktion setzt die orderType und Flips orderReverse. Mit der Hilfe von ng-show, wird in der Kopfzeile nur dann ein Pfeil angezeigt, wenn die Tabelle nach dieser Spalte sortiert ist. Keine Notwendigkeit für ein unsichtbares Glyphicon oder ähnliches.

1252100cookie-checkLeerer Platzhalter für Bootstrap-Glyphikon

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy