2016-07-23 7 views
0

Wir haben ein seltsames und nerviges Problem bei der Implementierung von MD-Toolbar und MD-Content-Struktur.Angular Material md-Inhalt - Inhalt scrollt nicht auf die richtige Position auf dem Eingabefokus

Es scheint, dass bei der Fokussierung auf Elemente im unteren Bildschirmbereich der Bildschirm nicht in die richtige Position scrollt, um die Beschriftung und das Eingabefeld zu sehen.

Entfernen Sie den MDContent-Container und alles funktioniert wie angenommen, auch starten Sie die Eingabe und Daten und die jetzt die MD-Inhalt Scroll-Position ist wieder in Ordnung.

Vielleicht wurde das Scroll Event irgendwie verworfen?

In einer UI/UX Perspektive ist es ein echtes Problem, da der Benutzer nicht verstehen, dass er auf dem angeforderten Elemente und muß den Inhalt manuell

Um scrollen es sieht nur in einem mobilen Gerät zu sehen (Chrome 51 + Android 4.4.2 in meinem Fall) zu den Standard-Winkelmaterial-Eingänge Demo und versuchen, auf niedriger Ebene Eingangselement zu konzentrieren.

https://material.angularjs.org/latest/demo/input

Jede Idee/Abhilfe wäre sehr hilfreich.

+0

Warum brauchen Sie 'md-content'? Wenn es nicht funktioniert, benutze es nicht. Es wird von Angular Material empfohlen, ist aber nicht in allen Situationen notwendig. –

+0

10x @camden_kid, aber um md-toolbar sticky header zu unterstützen, muss der Inhalt in md-content sein. –

+0

Was meinst du mit "sticky header"? Hier ist ein Beispiel für 'md-toobar' aus den Dokumenten, wobei' div' 'md-content' ersetzt - http://codepen.io/camden-kid/pen/GqdEGr –

Antwort

1

In Antwort auf Ihre letzte Bemerkung sieht diese CodePen

Wie ich in meinem ersten Kommentar md-content erwähnt kann durch div ersetzt werden, wenn erforderlich. Das klebrige md-toolbar wird erreicht mit

<div style="overflow-y:auto" flex> 
+0

10x, aber trotzdem ist es merkwürdig, dass das md-content nicht verwendet wird Trigger-Fokus-Ereignis. ich öffnete relevante ticket in angular-material github repo –

+1

@EladHirsch Ja, es ist seltsam. Ich habe gerade die Eingabe-Demo auf meinem Handy versucht und wie Sie sagen, scrollt die Ansicht nicht zum Eingang. Die einzige Lösung, die ich mir vorstellen kann, wenn Sie wirklich 'md-content' verwenden möchten, ist das Scrollen im Code mit' $ anchorScroll' - https://docs.angularjs.org/api/ng/service/$anchorScroll –