Vaadin Grid Row Details zeigen, die nicht in Chrome

JSBin Beispiel: https://jsbin.com/sofura/3/edit?html,output Vaadin Grid Row Details zeigen, die nicht in Chrome

* Hinweis: Dies funktioniert auf jsbin, aber nicht in meinem lokalen Projekt.

Ich habe eine App basierend auf dem neuen Polymer CLI. index.html -> main-app.html Verwendet app-Route enthält Symbolleiste nav usw.

Eine andere Seite wird als benutzerdefiniertes Element definiert, <part-info>.

Innerhalb der Teilinfo habe ich das Vaadin-Grid-Setup, das eine verschachtelte Vorlage zum Anzeigen der Zeilendetails enthält.

Die Zeilendetails werden in Edge angezeigt, nicht jedoch in Chrome.

Hat das etwas mit verschachtelten Vorlagen zu tun, oder vielleicht mit meinen Importen?

Quelle

2016-06-06 Adam

Kann etwas mit der flex CSS haben, die Sie dort haben. Sehen Sie, wenn Sie die Höhe auf einen festen Wert ändern und den Flex entfernen. – Marcus

Bei einer eher stilbezogenen Notiz bevorzuge ich es, meine Zeilendetails als eigenes Element zu behalten, die Datenbindung zu vereinfachen und zu einem saubereren Ergebnis IMO zu führen. Ich machte ein Beispiel dafür in einem meiner Tutorial-Videos: https://github.com/vaadin/elementary-school-009/ – Marcus

Ihr HTML sieht fehlerhaft aus. Sie haben eine unverschlossene <template> innerhalb einer <div> (line 42) gefolgt von streunenden <div> und <template> Tags (beginnend mit line 63).

Wenn Sie HTMLHint in Ihren JSBin Einstellungen aktivieren, werden Sie den Fehler sehen:

~~Aber Sie tatsächlich don't need <template is="dom-bind"> inside a custom element, und das entfernt werden soll. Versuchen Sie diese modifizierte jsbin in Chrome.~~ Es stellt sich heraus <vaadin-grid> erfordert eine automatisch bindende Vorlage innerhalb des Elements Polymer, um die Zeile Detail zu generieren.

Quelle

2016-06-06 20:40:18 tony19

Ja, ich habe anscheinend ein extra div kopiert, wie es aussieht. Die zusätzliche Vorlage darin ist für die Details der Vaadin-Rasterzeile zu verwenden. Beachten Sie ohne es, nichts wird angezeigt, wenn Sie auf die Zeilen klicken. https://vaadin.com/docs/-/part/elements/vaadin-grid/details.html – Adam

Ich empfehle, die Zeilendetails in einer separaten Komponente, wie hier: https://jsbin.com/citagu/2/edit? html, Konsole, Ausgabe –

@Adam, ich habe gerade Ihren Code in Chrome 51 auf OS X El Capitan versucht, und es verhält sich genauso wie die jsbin (dh, die Zeile Detail erscheint in Ordnung). Was ist deine Umgebung? – tony19

Ich glaube, ich habe den Schuldigen gefunden. window.Polymer = {dom: 'Schatten'};

So scheint es, dass in diesem Fall Edge Shadow DOM besser als Chrome behandelt. Oder etwas mit dem Vaadin-Raster macht es besser mit Polyfills arbeiten.

Polymer ist standardmäßig schattiges DOM. Hier ist ein bisschen mehr Infos über shady vs shadow DOM: https://www.polymer-project.org/1.0/blog/shadydom

Quelle

2016-06-14 15:54:54 Adam

Vaadin Grid Row Details zeigen, die nicht in Chrome

Antwort

Verwandte Themen