[Gelöst] Responsive Design - Diagramm Plugin

[ms20de]

Hallo Zusammen,

eine Sache die ich bei der CometVisu nicht verstanden habe, wie schaffe ich es das sich Diagramme an verfügbare Breite des Browsers anpassen?
Man sieht, dass der Platz in der Breite 50/50 auf die zwei Diagramme aufgeteilt ist. Allerdings nimmt die Breite des Diagramms nicht den vollständigen Platz ein. Ich kann eine fixe Breite in Pixeln für jedes Diagramm einstellen, dann passt es aber zum Beispiel am Handy nicht mehr.

Code: Alles auswählen

   1: <?xml version="1.0" encoding="UTF-8"?>
   2: <pages lib_version="8" design="alaska_slim" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../visu_config.xsd">
   3:   <meta>
   4:     <plugins>
   5:       <plugin name="diagram"/>
   6:     </plugins>
   7:     <mappings/>
   8:     <stylings/>
   9:     <statusbar>
  10:       <status type="html">&lt;img src="resource/icon/comet_64_ff8000.png" alt="CometVisu" /&gt; by &lt;a href="https://www.cometvisu.org/"&gt;CometVisu.org&lt;/a&gt;
  11:           - &lt;a href="manager.php"&gt;Config-Manager&lt;/a&gt;
  12:           - &lt;a href=".?forceReload=true"&gt;Reload&lt;/a&gt;</status>
  13:       <status type="html" condition="!edit" hrefextend="config">- &lt;a href="editor/"&gt;Edit&lt;/a&gt;</status>
  14:       <status type="html" condition="edit" hrefextend="config">- &lt;a href="."&gt;normal Mode&lt;/a&gt;</status>
  15:       <status type="html">- &lt;a href="?config=demo"&gt;Widget Demo&lt;/a&gt;</status>
  16:       <status type="html" hrefextend="config">- &lt;a href="check_config.php"&gt;Check Config&lt;/a&gt;</status>
  17:     </statusbar>
  18:   </meta>
  19:   <page name="Start">
  20:     <diagram series="hour" refresh="300" period="24" legend="both" legendposition="nw" popup="true" previewlabels="true">
  21:       <layout colspan="6" rowspan="6" scale="true"/>
  22:       <axis label="Luftqualität" unit="ppm" position="left"/>
  23:       <influx authentication="influx" field="*" consolidationFunction="MEDIAN" measurement="timeseries_db/TS00009"/>
  24:     </diagram>
  25:     <diagram series="hour" refresh="300" period="24" legend="both" legendposition="nw" popup="true" previewlabels="true">
  26:       <layout colspan="6" rowspan="6" scale="true"/>
  27:       <axis label="Luftqualität" unit="ppm" position="left"/>
  28:       <influx authentication="influx" field="*" consolidationFunction="MEDIAN" measurement="timeseries_db/TS00011"/>
  29:     </diagram>
  30:   </page>
  31: </pages>

Kann mir jemand einen Tipp gehen, was ich falsch mache?

Viele Grüße,
Matthias

[blaubaerli]

Hi Matthias @ms20de,

das Layout lässt drei Werte zu

<layout colspan="4" colspan-m="4" colspan-s="6"/>

Das ist des Rätsels Lösung.

Viel Spaß beim Testen.

Gruß
Jens

[Robert_Mini]

Und Bereite in px weglassen.
Robert

[blaubaerli]

Jo, sorry hatte ich übersehen...

Hinzugefügt nach 5 Minuten 9 Sekunden:
Aber wo ist px in seinem Beispiel? Ist doch nicht da...?

[Robert_Mini]

Im Text schreibt Jens von px, darum der Hinweis.

Die Darstellung im Screenshot klappt meines Wissens nur mit der Kombination colspan + px.

Lg
Robert

[ms20de]

Es funktioniert jetzt wie es soll, mir ist aber nicht ganz klar wo das Problem war.
Ich nehme an, dass ich irgendeine alte Datei der CV in Cache hatte.

Ich habe ein Image-Element in meine Config eingefügt und plötzlich hat sich das Layout verändert.
Auch nach dem Löschen es Images funktioniert es jetzt weiter wie erwartet.

Danke für eure Tipps.

Viele Grüße,
Matthias