Material-ui: [選択]ポップオーバーの位置を変更します

作成日 2018年07月20日  ·  11コメント  ·  ソース: mui-org/material-ui

  • [x]これはv1.xの問題です。
  • [x]このリポジトリの問題を検索し

予想される行動


選択したアイテムが選択されている状態で、選択がポップオーバーを表示する方法を無効にしたいのですが、ポップオーバーが奇妙に動いていて、無効にしたいのですが、メニューを選択の下に永続的に配置します。
Selectのファイルを調べましたが、見つかりませんでした。 教えていただければ、自分でやってPRします。

現在の動作

ポップオーバーは選択したアイテムに従って移動しており、無効化オプション/再配置オプションはありません。


メニューをselectの下に配置したい。
image

環境

Select question

最も参考になるコメント

ああ、それはSelectの場合です。さらに一歩進んでみましょう:

  • 選択はメニューを使用しています:
    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

全てのコメント11件

@ w3ndaドキュメントに従う:

  • メニューコンポーネントは、ポップオーバーの上に構築されています。
    capture d ecran 2018-07-21 a 22 00 18
  • ポップオーバーは、期待どおりに配置できます。
    capture d ecran 2018-07-21 a 22 01 16
  • これらの2つの情報を組み合わせて警告を修正すると、次のことがわかります。
        <Menu
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          getContentAnchorEl={null}

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

お役に立てば幸いです。

ああ、それはSelectの場合です。さらに一歩進んでみましょう:

  • 選択はメニューを使用しています:
    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

キング!
メニューの下に十分なスペースがある場合は完全にレンダリングされますが、画面にスペースがない場合はメニューが押し上げられることがわかりました。 本当ですか? または壊れた行動?

メニューの下に十分なスペースがある場合は完全にレンダリングされますが、画面にスペースがない場合はメニューが押し上げられることがわかりました。

@wenduzerこれは予想される動作のように聞こえます。

ああ、それはSelectの場合です。さらに一歩進んでみましょう:

@oliviertassinariありがとう、これはまさに私が過去2時間探していたものです。

@ Shrikant9どうすれば答えの発見可能性を向上させることができますか?

どうすれば答えの発見可能性を向上させることができますか?

@oliviertassinari私の意見では、 <Select />コンポーネントのデモページに、より多様なバージョンのデモがあります。 正直なところ、私は最近material-uiを使い始めたので、まだドキュメントに慣れる必要があります。

@ Shrikant9プルリクエストを喜んで受け入れます👍。

@oliviertassinari私の友人に感謝します、あなたは私をとてもとても助けてくれました。 マテリアルUIは十分に知っていますが、この決定には至りませんでした

#18493でデフォルトの位置を変更する可能性があります。

デフォルトにするそれはとても良いでしょう

このページは役に立ちましたか?
0 / 5 - 0 評価