Material-ui: [モーダル]スクロールバーとパディングの問題

作成日 2018年01月23日  ·  47コメント  ·  ソース: mui-org/material-ui

Menuが開くと、ページのスクロールバーが消えます。 これはページレイアウトに影響を与える可能性があります。 私の場合、すべてが右にジャンプします。これは視覚的なバグです。

解決

A）ライブラリでこれを修正するか、B）ドキュメントでこの動作に注意し、それを解決する方法を提供します。

https://material-ui-next.com/demos/menus/

ジャンプするもののコンテナはabsolute, left: 0, right: 0で、セクションはtext-align: centerまたはdisplay: flex; flex-direction: column; align-items: center;いずれかです。

あなたの環境

| 技術| バージョン|
| -------------- | --------- |
| 素材-UI | 1.0.0-beta.29 |

関連する問題

これらはすべて閉じられており、解決策が見つかりませんでした。

8475＃7431＃6656＃8710

bug 🐛 Modal
ソース
picture lorensr
👍31

最も参考になるコメント

私が修正した方法は、コンポーネントにdisableScrollLock={ true }を追加すること

picture Toshiuk 2019年11月27日
👍20 🎉10 🚀8 😄3 👎1

全てのコメント47件

私の場合、すべてが右にジャンプします。これは視覚的なバグです。

@lorensr複製の例はありますか？ これは、スクロールバーを無効にすることのよく知られた制限です。 .mui-fixedクラス名を持つ絶対位置の要素を処理します。
それを文書化する必要があります！

oliviertassinari picture oliviertassinari 2018年01月23日
👍3

参考までに、私が見つけたもう1つのことは、 .mui-fixed修正は、固定要素にも

box-sizing: content-box;
pelotom picture pelotom 2018年01月23日

おかげで、クラスの追加はうまくいきました。 content-boxは必要ありませんborder-boxです。

スクロールバーを削除すると、 right: 0要素内のブロックヘッダーがブラウザの右端まで伸びないことにも注意してください。

image

right: -20px変更することで修正されたため、cssは次のようになります。

main {
  position: absolute;
  box-sizing: border-box;
  left: 0;
  right: -20px;
  overflow-x: hidden;
}

欠点は、スクロールバーが存在する場合、中央に配置された子が中央から10ピクセル右になり、オーバーフローを非表示にする必要があることです。

lorensr picture lorensr 2018年01月25日

場合によっては、mui-fixedcssクラスを一部の固定要素に適用できないことがあります。 たとえば、私のページの下部にある鮮明なチャットウィジェット。 おそらくインターコムウィジェットでも発生します。

他の誰かが同じ問題を抱えていて、解決策を見つけましたか？
localhost_4000

abhishiv picture abhishiv 2018年03月16日

同様の問題がありましたが、コンテナは絶対的なものではありませんでした。 私にとってそれを修正したのは、次のように私のパディングに!importantを追加すること

padding: 0 !important;
michielglibert picture michielglibert 2018年06月05日
🎉9

これが正しい方法かどうかは100％わかりませんが、次のcssプロパティを<body>タグに追加しました

`` `css
体 {
位置：絶対;
左：-17px;
右：-17px;
パディングトップ：0;
パディング-右：17px;
パディング-左：17px;
padding-bottom：0px;
オーバーフロー-x：非表示;
オーバーフロー-y：auto！important //スクロールバーを非表示にする場合は！importantを削除します
}
「」

chrisshaddad picture chrisshaddad 2018年07月10日
👎1 👍1

うまくいけば、これは他の誰かを助けるでしょう：

@chrisshaddadのように、overflow-y: scrollを強制したためにシフトしていることがわかりました。 ページの長さが異なるためにシフトしないように、アプリ全体でy軸スクロールバーを強制しました。y軸スクロールが必要なものとそうでないものがあります。

余分なbodyやインラインスタイルを大量に配置する代わりに、固定のAppBar / Headerの下のコンテンツにoverflow-y: scrollを分離することで、シフトを修正することができました。 これで、ウィンドウ全体ではなく、ページコンテンツ用の常緑のスクロールバーができました。スクロールバーはbodyではなくページコンテンツにアタッチされているため、モーダル/メニューからシフトすることはありません。

参考までに、DOMは次のようになります。

<div>
  <Header />
  <div className="pageContent">
    <div className="page">
      <Route exact path="/pathToPage"> component={PageContent} />
    </div>
  </div>
</div>

およびCSS（ヘッダーの高さは45px）：

.pageContent {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  bottom: 0;
}
.pageContent .page {
  height: 100%;
  overflow-y: scroll;
}
cvocke picture cvocke 2018年07月16日

こんにちは、

私は現在これと同じ問題を抱えており、言及された解決策のいずれにも自分の幸せを見つけることができないことを認めなければなりません。

私が理解したところによると、 Modalはスクロールバーの使用を許可していません。これは、 Modalを使用して高度な検索を実行し、 Modalが必ずしも必要ではないため問題があります。短い内容にする。

あなたが言及した問題と解決策について考えると、Material-UIがModal 、 Dialog 、 Menu関連するすべてのスクロール可能なプロパティを実装できないのはなぜだろうと思っていました。 Menuおよびその他のポップアップ要素。 デフォルトでは、このブールプロパティはfalseになりますが、コンポーネントにスクロールバーを表示できるようにするにはtrueにすることができます。

これが不可能な場合は、以前のアイデアを好む場合でも、 ScrollBarコンポーネントを完全に実装することができます。

これは口で言うほど簡単ではないのではないかと思います。 したがって、私はあなたがしている並外れた仕事に感謝したいと思います。

rememberYou picture rememberYou 2018年09月09日
👍1

FWIWグローバルbody { overflow-y: scroll }を設定したところ、すべてがうまく機能しているようです。

avdd picture avdd 2018年09月09日
👎1

@avddこれは、モーダルではなくボディをスクロールできるため、

rememberYou picture rememberYou 2018年09月09日
👍1

@rememberYouモーダルは低レベルのプリミティブです。代わりにダイアログを使用することをお勧めします： https ： //material-ui.com/demos/dialogs/#scrolling-long-content 。

oliviertassinari picture oliviertassinari 2018年09月09日
👎1

@rememberYou ModalManagerは、モーダルが表示されているときにコンテナ要素（本体）に直接overflow:hiddenを設定し、モーダルが終了するとリセットするので、はい、機能します。

https://github.com/mui-org/material-ui/blob/7d4aeaf4c9cdf00a9c7eb41bd9bb7cac61840739/packages/material-ui/src/Modal/ModalManager.js#L24

avdd picture avdd 2018年09月09日

@oliviertassinariソリューションをありがとうございます。
@avdd申し訳ありませんが、 ModalManager試してみません

rememberYou picture rememberYou 2018年09月09日

@lorensrこれはまだ問題ですか？

nathanmarks picture nathanmarks 2018年09月10日

@oliviertassinari最後に、 Dialogを試してみましたが、うまく機能しますが、より具体的なデザインが必要なため、 Modalsを使用するのが好きです。

問題は、ログインに戻るためのリンクがある2番目のModal （サインアップ）を開くためのリンクがあるModal （ログイン）があることです。

この場合、私が使用する必要がありますModalManager簡単に追加および削除するModal ？ 問題の主題から抜け出して申し訳ありませんが、主題に関するドキュメントは見つかりませんでした。

rememberYou picture rememberYou 2018年09月10日
👎1

@nathanmarksはい、モーダルコンポーネントのドキュメントページにはまだ.mui-fixed記載されていないようです

lorensr picture lorensr 2018年09月10日

3.5.1を使用-ダイアログは閉じる前に左にシフトします。

ここで再現可能https://material-ui.com/demos/dialogs/-シンプルダイアログのデモを開いたり閉じたりします。

テスト後、これはv3.3で開始されました。

stephen099 picture stephen099 2018年11月14日

@ stephen099ご報告ありがとうございます！ 確認しましたが、別の問題です。

oliviertassinari picture oliviertassinari 2018年11月22日

ヘッダー（最新のmuiを使用）では、クラス名にmui-fixedが追加されていますが、スタイルが割り当てられていないことに気付きました（ヘッダーを調べると、 mui-fixedはありません）

そもそもなぜこの「パディングの追加」が行われるのか、なぜ必要なのか疑問に思います。 私にとっては、 Menuコンポーネントによって壊れています。

cssスタイリングを!importantオーバーライドせずにこれが発生しないようにするにはどうすればよいですか...？ ありがとう

vajnorcan picture vajnorcan 2019年02月27日
👍1

@vajnorcan mui-fixedクラス名は、body要素のスクロールをロックすると要素の位置が変更されることをモーダルコンポーネント（メニューで使用）に通知します。 スクロールバーの幅の削除は、一時的なパディング右スタイルで補正します。 CodeSandboxでの最小限の複製例を提供できますか？ ありがとうございました。

oliviertassinari picture oliviertassinari 2019年02月27日

.mui-fixedをどこに置きますか？ メニューを開く選択でこの問題が発生します。

capsule5 picture capsule5 2019年03月13日

@ capsule5メニューを開いたときにスクロールバーが無効になっているために「ジャンプ」する要素に追加する必要があり（通常、これは右側に固定された要素である必要があります）、そのパディングが処理されます。

また、前述のように、これをグローバルスタイルに追加する必要がある場合があることにも注意してください。

.mui-fixed {
  /*
   * make sure that added right padding
   * actually pushes contents to the left
   */
  box-sizing: content-box;
}
cvara picture cvara 2019年03月22日
👍3

このスレッドには複製はありません。 閉店します。

@ cvara ＃

oliviertassinari picture oliviertassinari 2019年07月12日

わかりません、これは解決しましたか？ v0.9からv4にアップグレードしましたが、モーダルを開くと、コンテンツが左にジャンプします（ padding-right: 17px取得します）？ そのための推奨される解決策は何ですか？

後で編集：

私の場合、 overflow-y: scroll !important;があったので、このジャンプの問題を修正するためにpadding-right: 0px !important;も追加する必要がありました。

Cristy94 picture Cristy94 2019年11月09日
👍5 ❤1

私が修正した方法は、コンポーネントにdisableScrollLock={ true }を追加すること

Toshiuk picture Toshiuk 2019年11月27日
👍20 🎉10 🚀8 😄3 👎1

@Toshiukどのコンポーネント？

wongjiahau picture wongjiahau 2019年12月01日
👍1

@wongjiahauモーダルコンポーネントv4 +

sartios picture sartios 2019年12月04日

メニューにdisableScrollLockを追加することもできます

jeronimomora picture jeronimomora 2019年12月14日

これは私にも再現しています。 メニュー項目を追加するサードパーティのコンポーネントを使用しているため、disableScrollLockを追加することは妥当ではありません。 これは修正する必要があります。 スクロールバーが実際に表示されるかどうかを検出するかもしれません。

archfz picture archfz 2019年12月14日

@archfz複製はありますか？

oliviertassinari picture oliviertassinari 2019年12月15日

Selectコンポーネントを使用しているときにもこれを目撃しています。 Selectドロップダウンが開かれるたびに、 overflow: hidden, padding-right: 15pxがアプリのメインのbodyタグに追加されます。 スタイルをオーバーライドする以外に、これに対する解決策はありますか？ これは予期された動作ではないように感じます

WholemealDrop picture WholemealDrop 2019年12月17日

@WholemealDropフォロー＃17353。

oliviertassinari picture oliviertassinari 2019年12月17日
👍1

@oliviertassinariああ、どうやら私の検索スキルはそれほど素晴らしいものではありません。 ありがとうございました！

WholemealDrop picture WholemealDrop 2019年12月17日

@oliviertassinari私は問題をコアに減らすことができました。 問題は、表示時に何らかの理由で誤った計算があることであるようです：flex + minHeight：100vh + bodyパディングなしとマージンが組み合わされています。 コードはそこにスクロールバーがあることを期待しているように見えますが、実際にはありません。 このコードは問題を再現するはずです。

import React, {FunctionComponent, SyntheticEvent, useState} from 'react';
import {IconButton, Menu, MenuItem, Tooltip} from "@material-ui/core";
import TranslateIcon from "@material-ui/icons/Translate";
import MuiAppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";

const AdminAppContainer: FunctionComponent = () => {
  const handleMenu = (event: SyntheticEvent) => setAnchorEl(event.currentTarget);
  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
  const open = Boolean(anchorEl);
  const handleClose = () => setAnchorEl(null);

  const body = document.getElementsByTagName('body')[0];
  body.style.margin = "0";
  body.style.padding = "0";

  return (
    <div style={{ display: 'flex', minHeight: '100vh'}}>
    <MuiAppBar color="secondary" >
      <Toolbar>
        <div style={{flex: 1}}></div>
        <div>
          <Tooltip title='asd'>
            <IconButton onClick={handleMenu}><TranslateIcon /></IconButton>
          </Tooltip>
          <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
            <MenuItem key={'test'} onClick={handleClose}>Test</MenuItem>
          </Menu>
        </div>
      </Toolbar>
    </MuiAppBar>
    </div>
  )
};
archfz picture archfz 2019年12月18日

@archfzコードサンドボックスを作成していただけませんか。 （ドキュメントの例の1つから始めることができます。）

mbrookes picture mbrookes 2019年12月18日

@mbrookes https://codesandbox.io/s/compassionate-keldysh-t4ebw?fontsize=14&hidenavigation=1&theme=dark

archfz picture archfz 2019年12月18日

@archfz申し訳ありませんが、これを逃しました。

ここで何を探していますか？ レイアウトの変更はありません。

mbrookes picture mbrookes 2020年01月08日

@archfz申し訳ありませんが、これを逃しました。

ここで何を探していますか？ レイアウトの変更はありません。

右上の文字をクリックすると、メニュー項目が開くと左に移動し、メニュー項目が閉じると右に戻ります。

WholemealDrop picture WholemealDrop 2020年01月08日

新しい号を開いていただけませんか？ 何か新しいようです。

oliviertassinari picture oliviertassinari 2020年01月08日

@archfzわかりました、ツールチップとの競合です。 無視しましょう。

oliviertassinari picture oliviertassinari 2020年01月11日

@oliviertassinariそれは本当の問題なので、無視してはいけません。 React-adminはマテリアルUIを使用しており、実際には箱から出してすぐに問題になります。 ここで問題を作成しましたhttps://github.com/mui-org/material-ui/issues/19203

archfz picture archfz 2020年01月12日

@Toshiukによって

  • メニュー、StyledMenu：
    disableScrollLock={ true }

  • 選択する：
    MenuProps={{ disableScrollLock: true }}

ソリューションをもっと簡単に見つけられるようにする必要があります。 :-)

samheyman picture samheyman 2020年03月01日
👍10

メニューを開いたときにツールバーの背景色に問題があり、スクロールバーが非表示になります

ここに例があります：
https://codesandbox.io/s/material-demo-nj80l

それがどのように修正されるか誰かを知っていますか？

Risbot picture Risbot 2020年03月09日

次のCSSを追加するだけです
body {padding-right：0px！important; }

sandunr picture sandunr 2020年04月11日

こんにちは、私のアプリではこのソリューションを使用しています。
コンポーネント<Menu>とCSSにdisableScrollLock={true} disablePortal={true} id="custom"を追加します
#custom { .MuiPopover-paper, .MuiPopover-paper { max-height: inherit !important; } }
私の場合、これは完全に機能します。 このトリックがお役に立てば幸いです。

Vincent-Alibert picture Vincent-Alibert 2020年04月22日

Dialogsで同じ問題が発生しました。 以下は、私が試した唯一の解決策であり、コンテンツのシフトを削除し、基になるページのスクロールをロックするか、スクロールバーを削除します。

解決：
アプリ内の最も外側のコンテナーdivまたは任意の最も外側のdiv（アプリ全体をカプセル化するコンテナー）に移動し、その幅を次のように設定します。

width: calc(100vw - 1px);

1pxは、 34pxまたはその他の低い値に置き換えることができます。 これにより、ダイアログを開くと、下にあるページのスクロールバーが存在する場合は非表示になり、コンテンツの位置にいかなる種類のシフトも発生しなくなります。 スクロールは基になるページに対して引き続きロックされており、ダイアログに対してもスクロールが可能です。

fastlogin picture fastlogin 2020年05月18日

disableScrollLock = {true}

あなたはただ素晴らしいです、ありがとう

cy-sachin-m picture cy-sachin-m 2020年08月25日
😄1
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

chris-hinds picture chris-hinds  ·  3コメント
finaiized picture finaiized  ·  3コメント
iamzhouyi picture iamzhouyi  ·  3コメント
pola88 picture pola88  ·  3コメント
activatedgeek picture activatedgeek  ·  3コメント