Ich habe eine "sortierbare" Tabelle, in der die Kopfzeile der aktuell sortierten Spalte ein Symbol anzeigt:
Das Sortiersymbol soll am Ende des Textes angezeigt werden (dh wir unterstützen LTR / RTL). Ich benutze gerade display:flex
. Wenn jedoch die Tabellenbreite kleiner wird und der Text der Spaltenüberschrift zu umbrechen beginnt, stoße ich auf mehrdeutige Zustände, in denen nicht klar ist, welche Spalte sortiert ist:
Stattdessen möchte ich folgende Anforderungen erfüllen:
- Das Symbol ist immer "eng" am "Ende" der längsten Textzeile ausgerichtet (auch wenn die Umbruchzelle / -schaltfläche breiter ist).
- Das Symbol sollte auch unten an der letzten Textzeile ausgerichtet sein.
- Das Symbol sollte niemals in eine eigene Zeile eingeschlossen werden.
- Die Schaltfläche muss vorhanden sein und sich über die gesamte Breite der Zelle erstrecken. (Das interne Design und das Markup können sich nach Bedarf ändern.)
- CSS und HTML nur wenn möglich.
- Es kann sich nicht auf bekannte / festgelegte Spaltenbreiten oder Kopfzeilentexte verlassen.
Zum Beispiel:
Ich habe mit einer Reihe von verschiedenen Kombinationen zu experimentieren display: inline/inline-block/flex/grid
, position
, ::before/::after
und sogar float
(!), Kann aber nicht das gewünschte Verhalten bekommen. Hier ist mein aktueller Code, der das Problem demonstriert:
.table {
border-collapse: collapse;
width: 100%;
}
.thead {
border-bottom: 3px solid #d0d3d3;
}
.thead .tr {
vertical-align: bottom;
}
.button {
padding: 1rem;
text-align: start;
font-family: Arial, "noto sans", sans-serif;
font-size: 0.875rem;
border: 0;
background-color: transparent;
width: 100%;
display: flex;
align-items: flex-end;
font-weight: bold;
line-height: 1.4;
}
.sort {
width: 1.25rem;
height: 1.25rem;
}
<table class="table">
<thead class="thead">
<tr class="tr">
<th class="th">
<button class="button">
Age
<span class="sort"></span>
</button>
</th>
<th class="th">
<button class="button">
Favorite Food
<span class="sort"></span>
</button>
</th>
<th class="th" aria-sort="ascending">
<button class="button">
Favorite Color
<span class="sort">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</span>
</button>
</th>
<th class="th">
<button class="button">
Likes Neil Diamond?
<span class="sort"></span>
</button>
</th>
</tr>
</thead>
</table>
Irgendwelche Ideen, wie man diese Benutzeroberfläche erreicht? Dies hat wahrscheinlich wenig mit dem Tisch- oder Knopfmaterial zu tun. Wirklich, ich muss Thing A
"fest" unten / am Ende ausgerichtet sein Thing B
(von einer flexiblen Breite und die Text umbrochen haben kann), Thing A
kann aber nicht auf eine eigene Linie umbrechen.
Ich habe versucht, mit den flex
Werten herumzuspielen , aber bei jeder Kombination wird der Text entweder vorzeitig oder nicht früh genug umbrochen.
Antworten:
Denken Sie, Sie brauchen JS dafür. Hier ist eine Antwort, die alle Bedingungen außer 5 erfüllen sollte.
quelle
Ich denke, hier gibt es überhaupt kein Problem außer der visuellen Mehrdeutigkeit. Hier sind meine Beobachtungen.
Es gibt so enge Grenzen, dass nur der dynamische Abstand die visuelle Mehrdeutigkeit verursacht.
Wenn wir nun zur Lösung kommen, ist die nächste Lösung, die ich ohne JavaScript-Intervention finden könnte , obwohl sie nicht perfekt ist,
Begrenzen Sie die Breite dieses Textes, indem Sie eine maximale Breite angeben:
Hinweis: Das
text-align: center
ist nur die Wirkung des fehlenden Raum zu reduzieren, es sei denn , Sie strenge Anforderung habe nicht mit diesem zu gehen.Bitte lassen Sie mich wissen, wenn dies Ihre Frage beantwortet.
So würde der Effekt sein:
quelle
Ich denke du bist fast gut und vermisst die (3), was ein bisschen Trick ist. Eine Idee ist, das Symbolelement mit einer Breite gleich dem
0
Leerzeichen zwischen dem Text und dem Sortiersymbol zu machen und zu deaktivieren. Dafür verwende ich einen zusätzlichen Wrapper für den Text und habe die Verwendung von Flexbox entfernt.Sie werden einen gewissen Überlauf haben, aber dies ist kein Problem, da Sie Polster anwenden. Sie können auch erhöhen,
padding-right
wenn Sie möchtenquelle
Wenn dein Thead-Titel nicht dynamisch ist, habe ich eine sehr einfache Lösung.
Dazu müssen Sie das letzte Wort des Titels und das SVG-Symbol in span zusammenfügen
zB: -html
Entfernen Sie display: flex aus der .button-Klasse und geben Sie der hinzugefügten Spanne die Stilanzeige: inline-block
Da die Spanne ein Inline-Block ist, befindet sich das SVG-Symbol niemals in einer separaten Zeile. Es wird mindestens ein Wort davor stehen
quelle
Sie könnten es so versuchen:
Hoffe, diese Antwort wird Ihnen helfen. Ich habe kein CSS für die mobile Ansicht erstellt!
quelle