<![CDATA[MDCSS v2 Berechnung der Position (responsive)]]>Hallo zusammen,

ich versuche gerade eine Karte aus dem MD_Simple Projekt anzupassen.
Als Beispielauflösung habe ich eine Breite von 360px angenommen, mit jeweils einem Rand rechts und links von 15px und 3 Elementen von 100px Breite.
Für das 1. Element nutze ich bei der linken Position calc(100% - 345px), 2. calc(100% - 230px) und 3. calc(100% - 345px).
Das funktioniert natürlich nur bei der fixen Auflösung.
Wie bekomme ich das jetzt so berechnet, dass sich bei einer Auflösung von zb. 400px die Elemente wieder richtig aufteilen - bzw. funktioniert das überhaupt?

]]>https://forum.iobroker.net/topic/53071/mdcss-v2-berechnung-der-position-responsiveRSS for NodeFri, 24 Apr 2026 09:17:26 GMTFri, 04 Mar 2022 10:20:03 GMT60<![CDATA[Reply to MDCSS v2 Berechnung der Position (responsive) on Sat, 05 Mar 2022 06:31:00 GMT]]>Habe noch eine andere Möglichkeit gefunden - allerdings auch ohne Ergebnis.
Using getBoundingClientRect to Get an Element's Size and Position

<body>
  <div id="hello">Hello World</div>

  <script>
  const helloElement = document.getElementById('hello');
  const results = helloElement.getBoundingClientRect();
  console.log(results);
  </script>

</body>

ergibt...

DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}bottom: 0height: 0left: 0right: 0top: 0width: 0x: 0y: 0[[Prototype]]: DOMRect

Frage ich das falsche Element ab?

]]>https://forum.iobroker.net/post/772124https://forum.iobroker.net/post/772124Sat, 05 Mar 2022 06:31:00 GMT<![CDATA[Reply to MDCSS v2 Berechnung der Position (responsive) on Sat, 05 Mar 2022 06:32:16 GMT]]>Ich habe jetzt einmal versucht über ein HTML Element seine Eigenschaften abzufragen...
Window getComputedStyle()

Leider erscheint bei den Werten zu der Position jeweils auto, sobald ich in den CSS Eigenschaften z.B. 20vw angebe.

<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>
<h2 id="element" style="background-color:lightblue">
The getComputedStyle() Method</h2>

<p>The computed styles for the test element are:</p>
<p id="demo"></p>

<script>
const element = document.getElementById("element");
const cssObj = window.getComputedStyle(element, null);

let text = "";
for (x in cssObj) { 
  cssObjProp = cssObj.item(x)
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
console.log(text);
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
]]>https://forum.iobroker.net/post/772122https://forum.iobroker.net/post/772122Sat, 05 Mar 2022 06:32:16 GMT<![CDATA[Reply to MDCSS v2 Berechnung der Position (responsive) on Fri, 04 Mar 2022 16:32:53 GMT]]>@darkiop said in MDCSS v2 Berechnung der Position:

@dirk_1930

Schau dir Mal vw/hw

https://www.mediaevent.de/schriftgroessen-immer-ein-griff-ins-wespennest/

an.

Die vw bzw. hw kannte ich noch gar nicht...
Grundsätzlich ist das eigentlich perfekt, nur hab ich jetzt das Problem, dass auf dem Ipad z.B. im Querformat der Viewport größer ist - d.h. das Element wird auch entsprechend größer und passt dann nicht mehr in die Card Ansicht. Da müsste man noch etwas anpassen - nur bin ich jetzt nicht wirklich fit in CSS. Vielleicht hat da jemand eine Idee?

]]>https://forum.iobroker.net/post/772118https://forum.iobroker.net/post/772118Fri, 04 Mar 2022 16:32:53 GMT<![CDATA[Reply to MDCSS v2 Berechnung der Position (responsive) on Fri, 04 Mar 2022 16:17:33 GMT]]>@dirk_1930

Schau dir Mal vw/hw

https://www.mediaevent.de/schriftgroessen-immer-ein-griff-ins-wespennest/

an.

]]>https://forum.iobroker.net/post/772109https://forum.iobroker.net/post/772109Fri, 04 Mar 2022 16:17:33 GMT<![CDATA[Reply to MDCSS v2 Berechnung der Position (responsive) on Fri, 04 Mar 2022 14:42:46 GMT]]>@dirk_1930 said in MDCSS v2 Berechnung der Position:

Hallo zusammen,

ich versuche gerade eine Karte aus dem MD_Simple Projekt anzupassen.
Als Beispielauflösung habe ich eine Breite von 360px angenommen, mit jeweils einem Rand rechts und links von 15px und 3 Elementen von 100px Breite.
Für das 1. Element nutze ich bei der linken Position calc(100% - 345px), 2. calc(100% - 230px) und 3. calc(100% - 345px).
Das funktioniert natürlich nur bei der fixen Auflösung.
Wie bekomme ich das jetzt so berechnet, dass sich bei einer Auflösung von zb. 400px die Elemente wieder richtig aufteilen - bzw. funktioniert das überhaupt?

Ich glaube ich hab es...
Element 1:
left: calc(100% - 95%)
width: calc(25%)

Element 2:
left: calc(50% - (31.25% / 2)
width: calc(31.25%)

Element 3:
left: calc(95% - (25%)
width: calc(25%)

Mal schaun, wie es dann bei 3 oder mehr Elementen wird...

]]>https://forum.iobroker.net/post/772045https://forum.iobroker.net/post/772045Fri, 04 Mar 2022 14:42:46 GMT