Material-ui: [مشروط] مشكلة شريط التمرير والحشو

تم إنشاؤها على ٢٣ يناير ٢٠١٨ · 47تعليقات · مصدر: mui-org/material-ui

عند فتح Menu ، يختفي شريط تمرير الصفحة. قد يؤثر هذا على تخطيط الصفحة. في حالتي ، يقفز كل شيء إلى اليمين ، وهو خطأ بصري.

المحلول

إما أ) إصلاح هذا في المكتبة ، أو ب) لاحظ هذا السلوك في المستندات ، وقدم طرقًا لحلها:

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

حاوية الأشياء التي تقفز هي absolute, left: 0, right: 0 ، بأقسام إما text-align: center أو display: flex; flex-direction: column; align-items: center;

بيئتك

| التقنية | الإصدار |
| -------------- | --------- |
| واجهة المستخدم المادية | 1.0.0 بيتا .29 |

القضايا ذات الصلة

هذه كلها مغلقة ، ولم أجد الحل فيها:

8475 # 7431 # 6656 # 8710

bug 🐛 Modal

مصدر

lorensr

👍31

التعليق الأكثر فائدة

الطريقة التي أصلحتها كانت إضافة disableScrollLock={ true } في المكون الخاص بي :)

Toshiuk في ٢٧ نوفمبر ٢٠١٩

👍20 🎉10 🚀8 😄3 👎1

ال 47 كومينتر

في حالتي ، يقفز كل شيء إلى اليمين ، وهو خطأ بصري.

@ lorensr هل لديك مثال على الإنجاب؟ إنه قيد معروف لتعطيل شريط التمرير. نتعامل مع العناصر ذات المواضع المطلقة التي لها اسم فئة .mui-fixed .
نحن بحاجة لتوثيق ذلك!

oliviertassinari في ٢٣ يناير ٢٠١٨

👍3

لمعلوماتك ، شيء آخر وجدته هو أن الإصلاح .mui-fixed لا يعمل إلا إذا كان العنصر الثابت لديك يعمل أيضًا

box-sizing: content-box;

pelotom في ٢٣ يناير ٢٠١٨

شكرا ، إضافة الطبقة عملت. لم أكن بحاجة إلى content-box . العنصر هو border-box .

وتجدر الإشارة أيضًا إلى أنه عند إزالة شريط التمرير ، فإن رأس الكتلة داخل عنصر right: 0 لا يمتد إلى الحافة اليمنى من المتصفح.

تم إصلاحه عن طريق تغيير right: -20px ، لذا أصبح css الآن:

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

الجانب السلبي هو أنه عندما يكون شريط التمرير موجودًا ، يكون الأطفال المتمركزون الآن 10 بكسل على يمين الوسط ، ولا بد لي من إخفاء الفائض.

lorensr في ٢٥ يناير ٢٠١٨

في بعض الحالات ، لا يمكن تطبيق فئة mui-fixed css على بعض العناصر الثابتة. على سبيل المثال ، أداة الدردشة الواضحة في أسفل صفحتي. من المحتمل أن يحدث ذلك مع أداة الاتصال الداخلي أيضًا.

هل لدى أي شخص آخر نفس المشكلة ووجد الحل؟
localhost_4000

abhishiv في ١٦ مارس ٢٠١٨

لدي مشكلة مماثلة ، لكن الحاوية لم تكن مطلقة. ما تم إصلاحه بالنسبة لي هو إضافة !important إلى المساحة المتروكة كما يلي:

padding: 0 !important;

michielglibert في ٥ يونيو ٢٠١٨

🎉9

لست متأكدًا بنسبة 100٪ مما إذا كانت هذه هي الطريقة الصحيحة للقيام بذلك ولكني أضفت خصائص css التالية إلى علامة <body>

"" المغلق
الجسم {
الموقف: مطلق ؛
اليسار: -17 بكسل ؛
اليمين: -17 بكسل ؛
حشوة أعلى: 0 ؛
الحشو الأيمن: 17 بكسل ؛
المساحة المتروكة: 17 بكسل ؛
الحشو السفلي: 0 بكسل ؛
تجاوز x: مخفي ؛
overflow-y: auto! important // قم بإزالة! المهم إذا كنت تريد أن يختفي شريط التمرير
}
""

chrisshaddad في ١٠ يوليو ٢٠١٨

👎1 👍1

نأمل أن هذا يساعد شخص آخر:

بعد تجربة بعض تجاوزات css المختلفة التي بدت أنها تعمل ولكنها شعرت بالخطأ ، مثل chrisshaddad ، وجدت أننا كنا overflow-y: scroll على تطبيقنا بالكامل. لقد أجبرنا تطبيق شريط التمرير على المحور y على نطاق واسع لمنع التحول بسبب صفحاتنا ذات الأطوال المتفاوتة - بعضها يتطلب التمرير على المحور y ، والبعض الآخر لا يتطلب ذلك.

بدلاً من وضع مجموعة إضافية من body أو التصميم المضمن ، تمكنا من إصلاح التحول عن طريق عزل overflow-y: scroll إلى المحتوى الموجود أسفل AppBar / Header الثابت. الآن لدينا شريط تمرير دائم الخضرة لمحتوى الصفحة ، بدلاً من النافذة بأكملها ، مع عدم وجود تغيير من الوسائط / القوائم نظرًا لأن شريط التمرير متصل بمحتوى الصفحة وليس body .

كمرجع لدينا يبدو DOM مثل:

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

و CSS (ارتفاع الرأس 45 بكسل):

.pageContent {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  bottom: 0;
}
.pageContent .page {
  height: 100%;
  overflow-y: scroll;
}

cvocke في ١٦ يوليو ٢٠١٨

مرحبا،

لدي حاليًا نفس المشكلة ويجب أن أعترف أنني لا أجد سعادتي في أي من الحلول المذكورة.

مما فهمته ، لا يسمح Modal باستخدام شريط التمرير ، وهو ما يمثل مشكلة لأنني أستخدم Modal لإجراء بحث متقدم و Modal لا أحتاج دائمًا لمحتوى قصير.

بالتفكير في المشكلة والحلول التي ذكرتها ، كنت أتساءل لماذا لا يمكن لـ Material-UI تنفيذ خاصية قابلة للتمرير لكل ما يتعلق بـ Modal ، Dialog ، Menu وعناصر منبثقة أخرى. بشكل افتراضي ، ستكون هذه الخاصية المنطقية خاطئة ، ولكن يمكن أن تكون صحيحة للسماح بعرض شريط التمرير في المكون.

إذا لم يكن ذلك ممكنًا ، فربما تقوم بتنفيذ مكون ScrollBar بشكل مباشر ، حتى لو كنت أفضل الفكرة من قبل.

أظن أن قول هذا أسهل من فعله. لذلك أود أن أشكرك على العمل الاستثنائي الذي تقوم به.

rememberYou في ٩ سبتمبر ٢٠١٨

👍1

FWIW لقد حددت للتو body { overflow-y: scroll } ويبدو أن كل شيء يعمل بشكل جيد.

avdd في ٩ سبتمبر ٢٠١٨

👎1

avdd هذا لا يساعد لأنه سيسمح لك بالتمرير في الجسم وليس في الوسائط.

rememberYou في ٩ سبتمبر ٢٠١٨

👍1

rememberYou النموذج هو مستوى بدائي منخفض ، قد ترغب في استخدام مربع الحوار بدلاً من ذلك: https://material-ui.com/demos/dialogs/#scrolling -long-content.

oliviertassinari في ٩ سبتمبر ٢٠١٨

👎1

يعينrememberYou ModalManager overflow:hidden مباشرة على عنصر الحاوية (الجسم) عندما يكون الشرط مرئيًا

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

avdd في ٩ سبتمبر ٢٠١٨

oliviertassinari شكرا لك على الحل.
avdd اعتذاري ، لم أحاول استخدام ModalManager .

rememberYou في ٩ سبتمبر ٢٠١٨

@ lorensr هل ما زالت هذه مشكلة؟

nathanmarks في ١٠ سبتمبر ٢٠١٨

oliviertassinari آخر شيء ، لقد حاولت باستخدام Dialog ، إنه يعمل بشكل جيد ، لكن بما أنني أريد تصميمًا أكثر تحديدًا ، أود استخدام Modals .

المشكلة هي أن لديّ Modal (تسجيل الدخول) يحتوي على رابط لفتح Modal (SignUp) ثانيًا يحتوي على رابط للعودة إلى تسجيل الدخول.

في هذه الحالة ، هل يجب علي استخدام ModalManager لإضافة وإزالة Modal بسهولة؟ آسف للخروج من موضوع المشكلة ، لم أجد أي وثائق حول هذا الموضوع.

rememberYou في ١٠ سبتمبر ٢٠١٨

👎1

nathanmarks نعم ، يبدو أن صفحات مستندات المكونات المشروطة لا تزال لا تذكر .mui-fixed

lorensr في ١٠ سبتمبر ٢٠١٨

باستخدام 3.5.1 - ينتقل مربع الحوار إلى اليسار قبل الإغلاق.

يمكن إعادة إنتاجه هنا https://material-ui.com/demos/dialogs/ - افتح وأغلق العرض التوضيحي لـ Simple Dialog.

بعد الاختبار ، بدأ هذا في الإصدار 3.3.

stephen099 في ١٤ نوفمبر ٢٠١٨

@ stephen099 شكرا على الإبلاغ! أؤكد ، لكنها مشكلة مختلفة.

oliviertassinari في ٢٢ نوفمبر ٢٠١٨

لقد لاحظت أنه في الرأس (مع أحدث إصدار mui) ، تمت إضافة mui-fixed إلى أسماء الفئات ، لكن لا يوجد نمط معين له (بفحص الرأس ، لا يوجد mui-fixed القاعدة محملة.

أتساءل ، لماذا يحدث هذا "الحشو الإضافي" في المقام الأول ، لماذا هو مطلوب؟ بالنسبة لي ، تم كسره بواسطة مكون Menu .

كيف يمكنني منع حدوث ذلك دون الحاجة إلى تجاوز نمط css بـ !important ...؟ شكر

vajnorcan في ٢٧ فبراير ٢٠١٩

👍1

vajnorcan يشير اسم الفئة mui-fixed إلى المكون الشرطي (المستخدم بواسطة القائمة) الذي سيتغير موضع العنصر عند قفل التمرير في عنصر النص الأساسي. نحن نعوض إزالة عرض شريط التمرير بنمط حشو مؤقت لليمين. هل يمكنك تقديم مثال على الحد الأدنى من الاستنساخ على CodeSandbox؟ شكرا لك.

oliviertassinari في ٢٧ فبراير ٢٠١٩

آسف أين تضع .mui-Fixed؟ لدي هذه المشكلة مع تحديد فتح القائمة.

capsule5 في ١٣ مارس ٢٠١٩

@ capsule5 تحتاج إلى إضافته إلى العنصر الذي "يقفز" نظرًا لتعطيل شريط التمرير عند فتح القائمة (عادةً ما يكون هذا عنصرًا ثابتًا إلى اليمين) وسيتم التعامل مع الحشو الخاص به

لاحظ أيضًا أنه ، كما ذكر أعلاه ، قد تحتاج إلى إضافة هذا إلى أنماطك العامة:

.mui-fixed {
  /*
   * make sure that added right padding
   * actually pushes contents to the left
   */
  box-sizing: content-box;
}

cvara في ٢٢ مارس ٢٠١٩

👍3

لا يوجد استنساخ في هذا الموضوع. أنا أغلق.

cvara نتابعها في # 9275.

oliviertassinari في ١٢ يوليو ٢٠١٩

لم أفهم ، هل هذا حل؟ لقد قمت بالترقية من الإصدار 0.9 إلى الإصدار 4 والآن عندما أقوم بفتح النماذج ينتقل المحتوى الخاص بي إلى اليسار (الحصول على padding-right: 17px )؟ ما هو الحل الموصى به لها؟

تحرير لاحق:

لأنه في حالتي كان لدي overflow-y: scroll !important; كما اضطررت إلى إضافة padding-right: 0px !important; لإصلاح مشكلة القفز هذه.

Cristy94 في ٩ نوفمبر ٢٠١٩

👍5 ❤1

الطريقة التي أصلحتها كانت إضافة disableScrollLock={ true } في المكون الخاص بي :)

Toshiuk في ٢٧ نوفمبر ٢٠١٩

👍20 🎉10 🚀8 😄3 👎1

@ توشيوك أي مكون؟

wongjiahau في ١ ديسمبر ٢٠١٩

👍1

wongjiahau مكون مشروط v4 +

sartios في ٤ ديسمبر ٢٠١٩

يمكنك أيضًا إضافة disableScrollLock إلى القائمة

jeronimomora في ١٤ ديسمبر ٢٠١٩

هذا يتكاثر بالنسبة لي أيضًا. لا تعد إضافة disableScrollLock غير معقولة لأنني أستخدم مكونات تابعة لجهة خارجية تضيف عناصر القائمة. يجب إصلاح هذا. ربما تكتشف أن شريط التمرير يظهر بالفعل أم لا.

archfz في ١٤ ديسمبر ٢٠١٩

archfz هل لديك استنساخ؟

oliviertassinari في ١٥ ديسمبر ٢٠١٩

أشهد هذا في استخدام مكونات Select أيضًا. كلما Select يتم فتح القائمة المنسدلة، overflow: hidden, padding-right: 15px يضاف إلى الرئيسية body العلامة على تطبيقي. هل يوجد حل هذا بجانب الأنماط المهيمنة؟ أشعر أن هذا ليس سلوكًا متوقعًا

WholemealDrop في ١٧ ديسمبر ٢٠١٩

WholemealDrop اتبع # 17353.

oliviertassinari في ١٧ ديسمبر ٢٠١٩

👍1

oliviertassinari ahah يبدو أن مهاراتي في البحث ليست بهذه

WholemealDrop في ١٧ ديسمبر ٢٠١٩

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 في ١٨ ديسمبر ٢٠١٩

archfz هل يمكنك إنشاء كود و صندوق من فضلك؟ (يمكنك البدء بأحد أمثلة المستندات.)

mbrookes في ١٨ ديسمبر ٢٠١٩

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

archfz في ١٨ ديسمبر ٢٠١٩

archfz آسف ، فاتنا هذا.

ما الذي أبحث عنه هنا؟ لا أواجه أي تغييرات في التخطيط.

mbrookes في ٨ يناير ٢٠٢٠

archfz آسف ، فاتنا هذا.
ما الذي أبحث عنه هنا؟ لا أواجه أي تغييرات في التخطيط.

عند النقر فوق الحرف الموجود في الجزء العلوي الأيمن ، فإنه يتحرك إلى اليسار عند فتح عنصر القائمة ، ثم يعود إلى اليمين عند إغلاق عنصر القائمة.

WholemealDrop في ٨ يناير ٢٠٢٠

هل يمكنك فتح قضية جديدة؟ يبدو شيئًا جديدًا.

oliviertassinari في ٨ يناير ٢٠٢٠

archfz حسنًا ، إنه يتعارض مع تلميح الأداة. دعونا نتجاهلها.

oliviertassinari في ١١ يناير ٢٠٢٠

oliviertassinari حسنًا ، يجب ألا نتجاهلها لأنها مشكلة حقيقية. يستخدم React-admin واجهة مستخدم مادية وهي في الواقع مشكلة خارج الصندوق. لقد أنشأت مشكلة هنا https://github.com/mui-org/material-ui/issues/19203

archfz في ١٢ يناير ٢٠٢٠

الحل الذي كررهToshiuk هو ببساطة إضافة ما يلي:

القائمة ، على غرار
disableScrollLock={ true }
تحديد:
MenuProps={{ disableScrollLock: true }}

نحتاج حقًا إلى جعل الحلول أكثر سهولة في العثور عليها! :-)

samheyman في ١ مارس ٢٠٢٠

👍10

لدي مشكلة مع لون خلفية شريط الأدوات عندما أفتح القائمة ، ويصبح شريط التمرير غير مرئي

هنا مثال:
https://codesandbox.io/s/material-demo-nj80l

تعرف أحدا كيف يتم إصلاحها؟

Risbot في ٩ مارس ٢٠٢٠

فقط أضف ملف المغلق التالي
نص {padding-right: 0px! important؛ }

sandunr في ١١ أبريل ٢٠٢٠

مرحبًا ، في تطبيقي أستخدم هذا الحل.
أضفت disableScrollLock={true} disablePortal={true} id="custom" على مكوّن <Menu> وفي css
#custom { .MuiPopover-paper, .MuiPopover-paper { max-height: inherit !important; } }
هذا العمل بشكل مثالي في حالتي. آمل أن تساعد هذه الحيل.

Vincent-Alibert في ٢٢ أبريل ٢٠٢٠

لقد واجهت نفس المشاكل في العمل مع Dialogs. ما يلي هو الحل الوحيد الذي جربته وهو أن كلاهما يزيل تغيير المحتوى ولا يزال يقفل تمرير الصفحة الأساسية / يزيل شريط التمرير الخاص به.

المحلول:
انتقل إلى الحاوية الخارجية div أو أي div خارجي (أي حاوية تغلف تطبيقك بالكامل) في تطبيقك واضبط عرضه على هذا:

width: calc(100vw - 1px);

يمكن استبدال 1px بـ 34px أو أي قيمة منخفضة أخرى. سيؤدي ذلك إلى أن يؤدي فتح مربع حوار إلى إخفاء شريط التمرير للصفحة الأساسية ، إذا كان موجودًا ، ولن يؤدي إلى إنشاء أي نوع من التغيير في موضع المحتوى. لا يزال التمرير مقفلاً للصفحة الأساسية ولا يزال التمرير ممكنًا لمربع الحوار الخاص بك.