Blockhöhe anpassen

[Sipple]

Ich würde gern die Höhe einzelner Blöcke anpassen. Die Breite geht ja ganz einfach über z.B. style="width:100%"
Wenn man aber versucht sowas auch für die Höhe zu machen (height:irgendwas), passiert schlicht gar nichts, egal ob mit %, px oder sonstwas.
Die Blockhöhe passt sich nur an, wenn zuviele Widgets im Block sind um in die Standardhöhe zu passen.
Geht das überhaupt und wenn ja wie?
Ich würde gerne für manche Plots höhere Blöcke haben, damit in y Richtung mehr Platz ist.

Gruß, Martin

[Msinn]

Das smartvisu Plugin kann Blöcke in 3 verschiedenen Höhen erzeugen, Das macht sie folgendermaßen:

<div class="block">
    <div class="set-{{ blocksize }}" data-role="collapsible-set" data-theme="a" data-content-theme="a" data-mini="true" data-iconpos="right">

        <div data-role="collapsible" data-collapsed="false">
            <h3>{{ visu_name }}</h3>
            {{ visu_widget }}
        </div>

    </div>
</div>

blocksize nimmt dabei die Werte 1, 2 oder 3 an. Ob die SV standardmäßig weitere Blockhöhen unterstützt weiss ich allerdings nicht,

[Sipple]

Hi

Das funktioniert leider nicht.

set-1, set-2 und set-3 beeinflussen tatsächlich die Blockhöhe, wobei set-1 der höchste und set-3 der niedrigste Block ist. Dafür ist das aber nicht gedacht. Das definiert die drei Collapsible Blockvarianten, mit 1, 2 oder 3 "sections". Da dabei bis zu 3 Überschriften vorhanden sind, muss die Blockhöhe angepasst werden, damit die Über-Alles-Höhe wieder passt.

Jetzt habe ich in der base.css mal nachgesehen und das gefunden:

.block .set-1 .ui-collapsible-content {
min-height: 14.5em;
padding: 10px 5px 10px 5px;
}

.block .set-2 .ui-collapsible-content {
min-height: 12em;
padding: 10px 5px 11px 5px;
}

.block .set-3 .ui-collapsible-content {
min-height: 9.5em;
padding: 10px 5px 12px 5px;
}

Naiv und unwissend wie ich bin, dachte ich, na wunderbar, so einfach?
Habe mir also einen Block kopiert, set-4 genannt und darin min-height: 19.5em gesetzt, einfach mal zum probieren.
Wär auch zu schön gewesen. Anstatt einen HÖHEREN Block zu bekommen, kam ein extrem niedriger dabei raus.
Dann mal einfach min-height bei set-1 geändert. Keine Reaktion. Mit den Werten in padding gespielt, auch nichts (weiß auch nicht was diese Werte machen).

Ich stehe also momentan auf dem Schlauch.

Am Ende ist natürlich nicht mal sicher, dass ein plot einen höheren Block überhaupt ausnutzt. Das müsste dann evtl. auch noch angepasst werden. Aber so weit komm ich grad erst gar nicht.
Noch jemand eine Idee?

Gruß, Martin

[Bonze]

nicht direkt eine idee, wäre das aber nix für die doku ?

[wvhn]

Die Boxen passen sich der Höhe des Inhalts automatisch an. Deshalb ist nur "min-height" angegeben.
D.h. wenn Du den Plot größer machst, sollte die Box darauf selber reagieren.

Gruß
Wolfram

[Msinn]

Ich verstehe den Bedarf schon. Wenn eine Box etwas wächst, kommt die 2 spaltige Darstellung evtl. durcheinander und es wird in einer "Zeile" nur eine Box dargestellt, ein Bereich in der Visu bleibt frei.

[wvhn]

Ja, das ist nicht so richtig schön gelöst. Man kann das aber im kleineren Block durch ein paar <br> oder ein <div> mit definierter Höhe ausgleichen.

[Sipple]

Richtig, dafür wäre eine variable Blockhöhe prima, habe ich vergessen als Beispiel zu erwähnen. Man kann zwar mit <br> arbeiten, aber das passt nur, wenn der Inhalt nicht dynamisch ist. Ich habe da z.B. einen Block, in dem alle gerade geöffneten Fenster dargestellt werden. Wenn alle zu sind, ist der Block aber leer und im Extremfall sind da aber 17 Elemente drin. Wie Martin schon geschrieben hat, wäre man mit einstellbarer Blockhöhe da bei zweispaltigem Layout flexibler.

Aber zurück zu meinem eigentlichen Problem. Mein Fehler. Klar passt sich die Blockhöhe an den Inhalt an. Daher lautet die korrekte Frage:

Wie kann ich die Höhe eines plot.period anpassen?

In der base.css gibt es einen Abschnitt "* --- W i d g e t s : P L O T" und gleich danach "/* Highcharts */".
Da gibt es mehrere Angaben von height zu highstock und highchart. An welcher Schraube muss man drehen, damit der plot.period höher wird?

[ReviloEgros]

Vor dem selben "Problem" stand ich auch schon. Ich habe auf dem Tablet an der Wand eine dreispaltige Ansicht. Und mein innerer Monk konnte es nicht ertragen, wenn die Blöcke auch nur einen Pixel unterschiedlich hoch waren . Ich habe dies für mich folgendermaßen gelöst:

<div class="block" style="width:390px"> 
  <div class="ui-bar-c ui-li-divider ui-corner-top">Rollo</div>
  <div class="ui-fixed ui-body-a ui-corner-bottom" style="height:250px">

    Content

  </div>
</div>

fully-screenshot.png

[Sipple]

Klasse gemachtes Layout!
Mit der Lösung zu den Blockhöhen spiele ich mal rum.
Fehlt mir nur noch die Erleuchtung zu den höheren Plots.

Danke Dir

Martin

[wvhn]

Am besten rufst Du im Browser die Entwicklertools auf und untersuchst den Plot, der Dich interessiert. (Rechtsklick auf den Plot -> Element untersuchen. )
dann siehst Du, mit welchen css-Definitionen die Höhe des Plots definiert wird und kannst diese auch live verändern.
Wenn Du den richtigen Schlüssel gefunden hast, gibst Du dem Element eine ID und verknüpfst dann in der visu.css den entsprechenden Schlüssel mit der ID.

Gruß
Wolfram

[wvhn]

wäre das aber nix für die doku ?

Ich habe das im develop eingearbeitet

Gruß
Wolfram