Ich habe gerade angefangen zu arbeiten mit den polymer-dialog und polymer-dialog-scrollable Elemente. Mit dem Standardfall und den Beispielen auf der Polymer-Website werden die Elemente gut angezeigt.Sizing Polymer-Dialog und Polymer-Dialog-scrollbar: variable Höhe
Allerdings stoße ich auf ein Problem. Der Inhalt, den ich möchte in der polymer-dialog-scrollable angezeigt werden gut aussehen nicht in der Standardgröße Dialog:
Ich möchte die Höhe des gesamten Dialogfeld erhöhen, so dass ich versuchte, die Elemente mit CSS Styling :
paper-dialog {
height: 90%;
}
paper-dialog-scrollable {
height: calc(100% - 128px); /* 128 seemed to account for the header and footer */
}
In einfachen HTML sollte dies funktionieren. Aber in der Praxis gibt es tatsächlich eine generierte div innerhalb der paper-dialog-scrollable mit ID und Klasse scrollable, die ich annehmen Polymer wird eingefügt. Inspizieren dieses Element, sehe ich diese CSS:
element.style {
box-styling: border-box;
max-height: 60px;
max-width: 1292.81px;
}
die den Bildschirm auf diese Weise macht:
Ich bin nicht sicher, wo diese max-height: 60px Styling kommt von, oder, wie es zu überschreiben . Da die div ein Polymer-generiertes Objekt zu sein scheint, gehe ich davon aus, dass dies irgendwann von Polymer erzeugt wird. Aber es wächst nicht mit dem Rest des Dialogs.
Gibt es eine Einstellung oder eine Methode für dieses Element, das sicherstellt, dass der innere "scrollbare" div mit seinem Container (paper-dialog-scrollable) wächst?
(Idealerweise würde ich den Dialog gerne nur auf der Grundlage der Größe des Inhalts, mit einer maximalen Höhe von 100% wachsen Aber das ist nicht Gegenstand dieser Frage..)
UPDATE:
Die maximale Höhe hängt nicht unbedingt auf 60px. Jetzt beginnt es bei 383px (weit unter der Höhe des Elements paper-dialog-scrollable). Die Höhe des "scrollbaren" div ändert sich, wenn ich das Fenster expandiere und verkleinere, aber es scheint immer ein bestimmter Prozentsatz von dem zu sein, was es sein sollte.
Hier ist ein Beispiel für den Code, wie ich die Elemente innerhalb des HTML-Körper bin mit:
<body unresolved>
<template is="dom-bind">
<div class="centerPanel">
...
<paper-button class="jobButton" onclick="openTheDialog('#BADialog')" style="margin-top:50px;">Business Analyst</paper-button>
...
</div>
<paper-dialog id="BADialog" modal>
<h2>Business Analyst</h2>
<paper-dialog-scrollable>
<div class="content" id="BAContent">
...
</div>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Apply for a Business Analyst position</paper-button>
</div>
</paper-dialog>
</template>
<script>
function openTheDialog(selector) {
document.querySelector(selector).open();
}
...
</script>
</body>
Ich kann dieses Verhalten in [Codepen] (http://codepen.io/tony19/pen/YWXzyP?editors=1000) nicht reproduzieren. Die 'max-height' von' .scrollable' wächst mit ihrem Container, wie man an der Größe des Fensters erkennen kann. Können Sie die Frage aktualisieren, um zu zeigen, wie Sie "Papier-Dialog" und "Papier-Dialog-scrollbar" verwenden? – tony19
@ tony19 Ich habe ein Codebeispiel und einige zusätzliche Informationen hinzugefügt. –
Hmm. Funktioniert immer noch in diesem [codepen] (http://codepen.io/tony19/pen/ZOGYEg?editors=1000). Wie sieht dein CSS aus? Und kannst du den Inhalt von 'div.content' anzeigen? – tony19