Gleicher calc-Befehl wird im <style>-Tag nicht angezeigt

Hallo liebes Forum,

ich dachte zunächst mein Fehler sei PHP oder CSS-bezogen, aber ich glaube, es liegt an Contao.

Ich möchte ein variables Grid-System erstellen, bei dem der User z.B. die Eingabe: 40% 60% tätigen kann. Im Frontend werden dann beide Boxen entsprechend der Prozente dargestellt. Abzüglich von X Pixel, da es zwischen den Boxen eine Gap gibt. Soweit alles gut. Das funktioniert prima im ungleichen Werten. Gebe ich jedoch 50% 50% ein, wird der doppelte Wert nicht ausgegeben. 25% 50% 25% wird zu: 25% 50% eine simple Ausgabe mittels echo direkt im HTML-Gerüst funktioniert einwandfrei. Sobald es in <style>-Tag ausgegeben wird, kürzt sich der doppelte Wert raus.

Anbei ein vereinfachter Screenshot - normalerweise läuft es über eine PHP Funktion - im Screenshot mit festen Werten wird es jedoch einfacher verdeutlicht.


Anhang 25795



Freue mich über jede Idee.

DANKE!

Mit CSS-Grid habe ich noch nicht so viel gearbeitet.. kann es sein, dass Contao die Werte einfach nur zusammenfässt, um die Ausgabe zu minimieren? Man kann ja auch z.B. statt

margin: 20px 20px 20px 20px;

auch einfach nur 20px schreiben.

Zitat:

---

Zitat von dazzle89

Mit CSS-Grid habe ich noch nicht so viel gearbeitet.. kann es sein, dass Contao die Werte einfach nur zusammenfässt, um die Ausgabe zu minimieren? Man kann ja auch z.B. statt

margin: 20px 20px 20px 20px;

auch einfach nur 20px schreiben.

---

Ich kann mir vorstellen, dass es tatsächlich ein ähnlicher Gedanke in der Logik ist. Margin: 20px hat die gleiche Aussage wie Margin: 20px 20px 20px 20px, beim Grid ist das allerdings nicht so.

Falls jemand ein ähnliches Problem hat: mein Workaround war nun erstmal, dass ich bei jedem Schleifendurchlauf eine Variable hochzähle und anhänge.

calc(33% - 15.001px) calc(33% - 15.002px) calc (33% - 15.003px)

Dadurch sind es nicht mehr dieselben Zahlen, auf dem Screen hat dies aber keine Auswirkung.

Sobald ich den Fehler finde, schreibe ich das hier nochmal rein.

Ungetestet:
Evtl. könntest du auch benannte Bezeichner definieren, selbst wenn du diese später nicht nutzt ala:

HTML-Code:

---

grid-template-columns: [line-myA] calc(33% - 20px) [line-myB] calc(33% - 20px) [line-myC] calc(33% - 20px);

---

(s.a.: [linename] https://developer.mozilla.org/en-US/...mplate-columns)