Ansicht „Nur Kategorien“ in zwei Spalten umgestaltet

[loginerror (Maciej Kuźmicz)]

Fortsetzung der Diskussion aus Wie formatiert man die Seite /categories?:

Ich habe eine Frage im Zusammenhang mit einer älteren Diskussion.

Wie aufwendig ist es, folgendes zu erreichen:

Das Nächste, das ich erreicht habe, ist dies:

Indem ich column-count: 2 auf das DIV angewendet habe, das die Tabelle umgibt, und display: block auf die Tabellenelemente.

Aber ich bin mir nicht sicher, wie ich den Header dazu bringen kann, sich über die gesamte Zeile zu erstrecken

EDIT.
Mir ist gerade aufgefallen, dass ich funktionell entweder diese Header-Zeile duplizieren, nur „Categories“ belassen oder einfach alles ausblenden müsste…

[awesomerobot (Kris)]

Ich denke, es wäre einfacher, wenn du tbody auf display: block und column-count: 2 setzt? Dann würde thead weiterhin die volle Breite einnehmen.

Aber ja, in diesem Fall würdest du ohnehin alles außer „Kategorie

[Canapin (Coin-coin le Canapin)]

Alternative mit Flexbox:

.category-list tbody {
    display: flex;
    flex-wrap: wrap;
}
.category-list tbody tr {
    width: 50%;
    display: flex;
}
.category-list tbody .category {
    flex: 1;
}

Es sind jedoch noch ein paar Anpassungen nötig.

[loginerror (Maciej Kuźmicz)]

@Canapin

Alternative mit Flexbox:

Inmitten davon habe ich vergessen, dass es schön wäre, wenn sie die horizontale Ausrichtung beibehalten würden.
Das ist fantastisch

[Canapin (Coin-coin le Canapin)]

Beachten Sie, dass die Kategorien mit diesem CSS nicht so aufgelistet werden:

1 - 4
2 - 5
3 - 6

Sondern so:

1 - 2
3 - 4
5 - 6

Außerdem müssen Sie eine Media Query hinzufügen, um das Design auf kleinen Bildschirmen anzupassen.

[loginerror (Maciej Kuźmicz)]

Ich habe beide Optionen etwas ausprobiert, und es scheint, dass es für unseren Zweck besser ist, die Kategorietabelle in der Mitte zu teilen, anstatt sie sequenziell anzuordnen.

Allerdings ist es schwierig zu steuern, wo die Aufteilung erfolgen soll.

In meinem Browser habe ich Folgendes erreicht:

Aber nur, wenn ich die Kategorien links künstlich in einem Div platziert habe (um zu verhindern, dass sie zu früh aufgeteilt werden; andernfalls wird die Stammkategorie „Measure“ in die rechte Spalte verschoben):

Gibt es eine Möglichkeit, Zeilen mit bestimmten Kategorie-IDs in das Div zu „packen“, vielleicht über die Theme-API?

[Canapin (Coin-coin le Canapin)]

Das, was du fragst, scheint knifflig zu sein und erfordert möglicherweise etwas JS-Magie. Mit der CSS-Eigenschaft column bin ich mir sicher, dass die Kategorien nicht horizontal ausgerichtet sein werden (es sei denn, du setzt eine feste Höhe), wie es bei Flexbox der Fall ist, und das sieht nicht sehr schön aus.

Ich habe erreicht, was du willst, aber es ist etwas umständlich:

Ich habe mein vorheriges CSS verwendet, dann ein leeres <tr> hinzugefügt (was meiner Meinung nach mit einer einzigen JS-Zeile möglich ist) und die Eigenschaft order gesetzt, um die Reihenfolge der div-Elemente zu ändern. Letzteres kann auch nur per CSS erreicht werden, indem man jeden HTML-Wert von data-category-id anspricht. Hier ist das Ergebnis:

Hier ist das leere <tr>:

Beachte, dass du wahrscheinlich jedes Mal das CSS und/oder JS ändern musst, wenn du eine Kategorie hinzufügst oder entfernst.

edit: Wenn du nur ein oder zwei zusätzliche leere Elemente benötigst, musst du kein JS verwenden, um ein <tr> hinzuzufügen. Du kannst auch :after und/oder :before wie folgt verwenden:

.category-list tbody:after {
    width: 1px;
    content: "";
}

Dadurch wird ein 1 px breites leeres Element hinzugefügt, das genauso funktioniert.

[loginerror (Maciej Kuźmicz)]

Danke, es hat sich ganz gut ausgebracht Uns macht es nichts aus, die Kategorien detailliert zu verwalten, also ist alles in Ordnung.
Das Endergebnis kannst du auf unserem Forum sehen.

[Canapin (Coin-coin le Canapin)]

Kannst du uns deine Forum-URL mitteilen?

[loginerror (Maciej Kuźmicz)]

@Canapin

Forum-URL

Klar, ich habe sie in meinem Profil, und ich wollte nicht direkt Werbung machen

UiPath Community Forum