Verwendet eine Webanwendung Dialoge, kann es sinnvoll sein, die Größe dynamisch am Viewport (Anzeigebereich) des Browserfensters anpassen zu lassen. Die JSF Bibliothek PrimeFaces liefert bereits eine fertige Dialog Komponente als Overlay mit, bei der die Größe eingestellt werden kann.

Größenangabe in Prozent (%)

Leider nützt es nichts, einfach die Angaben der Breite und/oder Höhe in Prozent anzugeben, da dies nicht den gewünschten Effekt mit sich bringt. Die Höhe richtet sich nicht nach der Relation zum Browserfenster, sondern nach dem Inhalt des Dialogs.

Facelet

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>Viewport height/width example</title>
    </h:head>

    <h:body style="background-color: #cacaca">
        <p:dialog visible="true" height="80%" width="80%">
            dialog with percentage height (80%) and width (80%)
        </p:dialog>     
    </h:body>  
</html>

Ergebnis:

Größenangabe in Prozent (%)

Größenanpassung mit JavaScript

Um die Größe trotzdem dynamisch am Viewport anpassen zu können, musste bisher eine Lösung über JavaScript erstellt werden, womit die Größe dynamisch berechnet und angepasst wird. Zusätzlich musste auch auf die Größenänderung des Viewports reagiert werden, wenn z. B. die Größe es Browserfensters verändert wurde. Diese Methode funktioniert zwar, ist aber umständlich. Deshalb werde ich hier nicht detailierter darauf eingehen.

Größenangabe mit CSS3 Viewport Units

In CSS3 gibt es einige neue Einheiten für relative Maße, womit u. a. die Breite beziehungsweise die Höhe in Relation zum Anzeigebereich angegeben werden kann.

  • vw (Viewport-Breite)
    100vw entspricht der vollen Breite des Viewports (Anzeigebereichs).
  • vh (Viewport-Höhe)
    100vh entspricht der vollen Höhe des Viewports (Anzeigebereichs).

Mit diesen Möglichkeiten erziehlt man dann auch sehr einfach den gewünschten Effekt.

Facelet

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>Viewport height/width example</title>
    </h:head>

    <h:body style="background-color: #cacaca">
        <p:dialog visible="true" height="80vh" width="80vw">
            dialog with viewport height (80vh) and width (80vh)
        </p:dialog>       
    </h:body>  
</html>

Ergebnis:

Größenangabe mittels Viewport Unit (vh/vw)

Browser Support
Die Viewport Units „vw“ und „vh“ werden von allen modernen Browsern unterstützt. Im Microsoft Internet Explorer funktioniert dies ab Version 9, im Mozilla Firefox ab Version 19 und im Google Chrome ab Version 20.
Weitere Informationen findet man hier.

Vergleich Prozent vs. Viewport Units

Hier noch der direkte Vergleich zwischen der Angabe in Prozent und der Viewport Units.

Vergleich Prozent vs. Viewport Units

Live Beispiel
Primefaces Dialog – Vergleich Prozent vs. Viewport Units

PrimeFaces Dialog: Größe (Breite & Höhe) dynamisch am Viewport (Browserfenster) anpassen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert