Material-ui: [Auswählen] Popover-Position ändern

Erstellt am 20. Juli 2018  ·  11Kommentare  ·  Quelle: mui-org/material-ui

  • [x] Dies ist ein Problem mit Version 1.x.
  • [x] Ich habe die Probleme dieses Repositorys durchsucht und glaube, dass dies kein Duplikat ist.

Erwartetes Verhalten


Ich möchte die Art und Weise deaktivieren, in der die Auswahl das Popover anzeigt, wobei sich das ausgewählte Element in der Auswahl befindet. Das Popover bewegt sich seltsam, ich möchte es nur deaktivieren und das Menü dauerhaft unter der Auswahl positionieren.
Ich habe die Dateien von Select durchgesehen und konnte sie nicht finden. Wenn du mich durchbringen kannst, mache ich es selbst und mache eine PR.

Aktuelles Verhalten

Das Popover bewegt sich entsprechend dem ausgewählten Element und es gibt keine Deaktivierungsoption / Neupositionierungsoption.

Beispiele


Ich möchte, dass das Menü unter Auswahl steht.
image

Kontext

Select question
Quelle
picture w3nda

Hilfreichster Kommentar

Oh, es ist mit dem Select, lass uns einen Schritt tiefer gehen:

  • Die Auswahl verwendet das Menü:
    capture d ecran 2018-07-21 a 22 04 42
  • ♻️
      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

picture oliviertassinari am 21. Juli 2018
👍53 ❤8 🎉6 🚀5 😄2 👀1 👎1

Alle 11 Kommentare

@ w3nda Nach der Dokumentation:

  • Die Menükomponente basiert auf dem Popover:
    capture d ecran 2018-07-21 a 22 00 18
  • Der Popover kann wie erwartet positioniert werden:
    capture d ecran 2018-07-21 a 22 01 16
  • Wenn wir diese beiden Informationen kombinieren und eine Warnung korrigieren, können wir Folgendes finden:
        <Menu
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          getContentAnchorEl={null}

https://codesandbox.io/s/9l17k3qnk4

Ich hoffe das hilft.

oliviertassinari picture oliviertassinari am 21. Juli 2018
👍13

Oh, es ist mit dem Select, lass uns einen Schritt tiefer gehen:

  • Die Auswahl verwendet das Menü:
    capture d ecran 2018-07-21 a 22 04 42
  • ♻️
      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

oliviertassinari picture oliviertassinari am 21. Juli 2018
👍53 ❤8 🎉6 🚀5 😄2 👀1 👎1

König!
Ich habe festgestellt, dass das Menü perfekt gerendert wird, wenn genügend Platz darunter ist. Wenn er jedoch keinen Platz auf dem Bildschirm hat, wird das Menü nach oben verschoben. wahr? oder gebrochenes Verhalten?

w3nda picture w3nda am 22. Juli 2018

Ich habe festgestellt, dass das Menü perfekt gerendert wird, wenn genügend Platz darunter ist. Wenn er jedoch keinen Platz auf dem Bildschirm hat, wird das Menü nach oben verschoben.

@wenduzer Das klingt nach dem erwarteten Verhalten.

oliviertassinari picture oliviertassinari am 22. Juli 2018
🎉3 ❤2

Oh, es ist mit dem Select, lass uns einen Schritt tiefer gehen:

@oliviertassinari Danke, genau das habe ich in den letzten 2 Stunden gesucht.

Shrikant9 picture Shrikant9 am 4. März 2019

@ Shrikant9 Wie können wir die

oliviertassinari picture oliviertassinari am 4. März 2019

Wie können wir die Auffindbarkeit der Antwort verbessern?

@oliviertassinari Meiner Meinung nach gibt es auf der <Select /> -Komponente vielfältigere Versionen von Demos. Obwohl ich ehrlich bin, habe ich kürzlich angefangen, Material-UI zu verwenden, also muss ich mich noch an die Dokumente gewöhnen.

Shrikant9 picture Shrikant9 am 5. März 2019
🎉2

@ Shrikant9 Wir würden uns freuen, eine Pull-Anfrage anzunehmen 👍.

oliviertassinari picture oliviertassinari am 5. März 2019
👍2

@oliviertassinari danke mein Freund, du hast mir sehr sehr sehr geholfen. Ich kenne Material ui gut genug, aber ich konnte nicht zu dieser Entscheidung kommen

itairov picture itairov am 14. Juni 2020

Wir werden wahrscheinlich die Standardposition mit # 18493 ändern.

oliviertassinari picture oliviertassinari am 14. Juni 2020

Standard machen wäre es sehr gut

itairov picture itairov am 15. Juni 2020
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

chris-hinds picture chris-hinds  ·  3Kommentare
mb-copart picture mb-copart  ·  3Kommentare
revskill10 picture revskill10  ·  3Kommentare
iamzhouyi picture iamzhouyi  ·  3Kommentare
ghost picture ghost  ·  3Kommentare