ElabNET Technik Forum

Verfasst: **So Apr 28, 2019 2:31 pm**

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.

Bild

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

Verfasst: **So Apr 28, 2019 2:42 pm**

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

Verfasst: **So Apr 28, 2019 4:13 pm**

Und Bereite in px weglassen.
Robert

Verfasst: **So Apr 28, 2019 4:30 pm**

Jo, sorry hatte ich übersehen...

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

Verfasst: **So Apr 28, 2019 8:06 pm**

Im Text schreibt Jens von px, darum der Hinweis.

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

Lg
Robert

Verfasst: **Mo Jun 03, 2019 12:37 pm**

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

ElabNET Technik Forum

Responsive Design - Diagramm Plugin

Responsive Design - Diagramm Plugin

Re: Responsive Design - Diagramm Plugin

Re: Responsive Design - Diagramm Plugin

Re: Responsive Design - Diagramm Plugin

Re: Responsive Design - Diagramm Plugin

Re: Responsive Design - Diagramm Plugin