Riesige Höhen bei Verwendung von hbox & vbox

[Dracolein]

Hallo zusammen

ich bräuchte Hilfe bei der HTML Gestaltung meines Tablet UI Dashboards, wo ich grundlegend Gridster in Verwendung habe.
Konkret öffnet sich mit folgendem Code ein Popup, dessen Inhalt ich in 2 Spalten nebeneinander (class="hbox") darstellen möchte, was auch grundsätzlich funktioniert.

Allerdings wird bei mir in Chromium & Firefox die Höhe dieses <div class="hbox">-Elements viel zu groß dargestellt.  Ich würde erwarten, dass die Höhe lediglich so groß, wie dessen Inhalt ist. Tatsächlich muss ich nun sogar scrollen im Extremfall.

Ich habe schon sämtliche Variationen durchprobiert, die Höhe explodiert erst bei Verwendung von hbox / vbox 
Hier mal der Popup-Code, habe zur Veranschauuung rote Rahmen eingebaut:

Code Auswählen Erweitern

<!--  Popup Bereich zum klicken-->
            <div data-type="popup" data-height="650px"  data-width="1200">
                <div data-type="symbol" data-icon="mi mi-build" class="bigger" data-color='["lightgray"]'></div>
                <!-- System Popup Inhalt -->
                <div class="dialog">
                <header>Systeminformationen</header>
                    <div class="hbox border-red">
                    <div>
                        <!-- linke Spalte -->
                        <div class="border-blue"> 
                        <div data-type="label" class="darker normal inline">Betriebszeit:</div>   
                        <div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="big darker inline"></div> 
                        </div>

                    </div>
                    <div class="border-yellow">
                    <!-- Rechte Spalte -->
                    <div class="label">Text rechte Spalte</div>
                    </div>
                    </div>   
                   
                   
                </div>
            </div>

[amenomade]

Das Popup Fenster muss aber laut deiner Definition 1200x650 groß sein

[Dracolein]

Richtig und das ist es auch.
Gänzlich ohne Inhalt ist das Popup Fenster exakt gleich groß wie auf meinem Screenshot, nur ohne Scrollbalken. Letzterer taucht erst auf, wenn ich mit hbox / vbox arbeite.
Die Frage hier ist: wieso will sich das div-Element mit dem hbox-Zusatz auf volle Breite und Höhe ausbreiten? Das ist mMn nirgendwo definiert.

Am obigen Code-Beispiel: wenn ich lediglich das Wort "hbox" entferne, ohne sonstwas zu verändern, ist der Scrollbalken weg und das Layout natürlich etwas durcheinander.

Ich hatte dieses hier beschriebene Problem schon öfter und bin bisher ausschließlich mit Workarounds weitergekommen, wie auch hier. (hbox entfernt und mit "inline" weitergearbeitet). Aber das ist ja keine echte Lösung, das muss doch eine Ursache haben ?!

[amenomade]

Normalerweise packt man die Spalten einer hbox in entspr. vboxen

Aber ich würde auf jeden Fall diese zusätzliche divs entfernen.

Für weitere Analyse würde ich den DOM-Inspector vom Browser benutzen, und gucken welche css-Klassen die andere überschreiben

[Dracolein]

Deine markierten Divs resultieren aus ursprünglich angedachten vbox-Elementen, die ich zu Testzwecken bereits entfernt hatte.

[setstate]

Das Problem ist der <header> im Dialog. Der wird nicht beachtet, wenn die rote Box auf 100% Höhe des Dialoges geht. Der <header> kommt dann noch obendrauf und dadurch entsteht der Overflow mit Scrollbalken.

Ein position:fixed  hilft (ergänze ich ...)

Code Auswählen Erweitern

.dialog > header {
  position: fixed;
}

für Testzwecke auch erstmal inline

Code Auswählen Erweitern

<header style="position:fixed">Systeminformationen</header>

[Dracolein]

Hm bei diesem Tip hüpft der Text zwischen den Header-Elementen aus der eigens dafür definierten Zeile heraus

[setstate]

besser ist es ein vbox beim dialog hinzuzufügen

Code Auswählen Erweitern

<div class="dialog vbox">