web-dev-qa-db-ja.com

ブラウザの右下隅にある材料UIポッパーをどのように配置しますか。

私は素材UI v4.9.1を使用しています。それらはPopper React v1.14.1に基づいて、$ ===コンポーネントの反応）を持っています。

私はブラウザの右下隅にある小さな正方形のカードをレンダリングしようとしています。

わかりやすいCSSで、私はこれをやらなければならないと思います。

.card {
    position: 'fixed';
    bottom: 0;
    right: 0;
}

私はPopperコンポーネントでそれをやろうとしていましたが、私はどのようにしてわかりません。これが私が今持っているものです。

<Popper
    open={anchor !== null}
    placement="bottom-end"
    anchorEl={anchor}
    popperOptions={{positionFixed: true}}
    modifiers={{
        // I think I need some modifier?...
    }}
>
    {/* card component */}
</Popper>

ユーザーがボタンをクリックするとanchor = document.bodyを設定しています。私もセットしました

html, body {
    width: 100%;
}

私のルートindex.html.

ただし、Popperが右上隅にあるときに表示されます。 divこのスタイルを設定します。

position: fixed;
top: 0px;
left: 0px;
transform: translate3d(1164px, 5px, 0px);
will-change: transform;

何が行方不明ですか？

javascriptcssreactjsmaterial-uipopper.js
3
425nesp

CSSをPopperに設定できます。

<Popper
    open={anchor !== null}
    style={{ position: 'fixed', bottom: 0, right: 0, top: 'unset', left: 'unset' }}
>
    {/* card component */}
</Popper>
 _

しかし、これは最善の解決策ではないかもしれません、おそらくあなたはあなた自身のコンポーネントを書くべきです、この機能は複雑さが複雑ではないように思われるので、Popperを使用する必要はないかもしれません。

1
Puckwang

ボディの下に十分なスペースがない場合は、ポッパーはトップコーラーに表示されることがあります。折り返し、上部に表示されている可能性があります。ボディの高さを50％にして、それを下に表示されているかどうかを確認してください。

0
Wilson

anchorEl={anchor} PROPを削除するか未定義に設定すると、ポッパーの内容は<body>タグの子になります。disablePortal prop（デフォルトはfalseに従ってください： https://material-ui.com/api/popper/#props ）。

この助けを願っています！

0
Huy Nguyen