Material-ui: [मोडल] स्क्रॉलबार और पैडिंग मुद्दा

को निर्मित 23 जन॰ 2018 · 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-बीटा .२ ९ |

8475 # 7431 # 6656 # 8710

bug 🐛 Modal

स्रोत

lorensr

👍31

सबसे उपयोगी टिप्पणी

जिस तरह से मैंने तय किया वह मेरे घटक में disableScrollLock={ true } जोड़ रहा था :)

Toshiuk 27 नव॰ 2019

👍20 🎉10 🚀8 😄3 👎1

सभी 47 टिप्पणियाँ

मेरे मामले में, यह दाईं ओर सब कुछ कूदता है, जो एक दृश्य बग है।

@lorensr क्या आपके पास एक प्रजनन उदाहरण है? यह स्क्रॉलबार को अक्षम करने की एक प्रसिद्ध सीमा है। हम पूर्ण तैनात तत्वों को संभालते हैं जिनके पास .mui-fixed वर्ग का नाम है।
हमें इसे प्रलेखित करने की आवश्यकता है!

oliviertassinari 23 जन॰ 2018

👍3

FYI करें, एक और चीज़ जो मुझे मिली है वह यह है कि .mui-fixed फिक्स केवल तभी काम करता है यदि आपका निश्चित तत्व भी हो

box-sizing: content-box;

pelotom 23 जन॰ 2018

धन्यवाद, वर्ग को जोड़ने का काम किया। मुझे 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 25 जन॰ 2018

कुछ मामलों में मुई-फिक्स्ड सीएसएस वर्ग को कुछ निश्चित तत्वों पर लागू करना संभव नहीं है। उदाहरण के लिए मेरे पृष्ठ के नीचे कुरकुरी चैट विजेट। शायद इंटरकॉम विजेट के साथ भी होता है।

किसी और को भी एक ही समस्या है और एक समाधान मिल गया है?
localhost_4000

abhishiv 16 मार्च 2018

मेरे पास एक समान मुद्दा था, लेकिन कंटेनर निरपेक्ष नहीं था। मेरे लिए यह तय था कि इस तरह मेरी गद्दी में !important जुड़ रहे हैं:

padding: 0 !important;

michielglibert 5 जून 2018

🎉9

अगर यह करने का सही तरीका है तो मुझे 100% यकीन नहीं है लेकिन मैंने निम्नलिखित सीएसएस गुणों को <body> टैग में जोड़ा है

`` `सीएसएस
तन {
स्थिति: निरपेक्ष;
बाएं: -17 पीएक्स;
दाईं ओर: -17 पीएक्स;
गद्दी-शीर्ष: 0;
पैडिंग-राइट: 17 पीएक्स;
पैडिंग-लेफ्ट: 17 पीएक्स;
गद्दी-तल: 0px;
अतिप्रवाह-एक्स: छिपा हुआ;
ओवरफ्लो- y: ऑटो! महत्वपूर्ण // यदि आप स्क्रॉल बार को गायब करना चाहते हैं तो इसे हटा दें
}
`` ``

chrisshaddad 10 जुल॰ 2018

👎1 👍1

उम्मीद है कि यह किसी और की मदद करता है:

कुछ विभिन्न सीएसएस ओवरराइड्स की कोशिश करने के बाद, जो काम करने लगते थे, लेकिन गलत लगे, जैसे @chrisshaddad की, मैंने पाया कि हम अपने पूरे ऐप पर overflow-y: scroll मजबूर होने के कारण शिफ्ट हो रहे थे। हमारे पृष्ठों की लंबाई अलग-अलग होने के कारण हमने y- अक्ष स्क्रॉलबार ऐप-वाइड को शिफ्टिंग को रोकने के लिए मजबूर किया था - कुछ को y- अक्ष स्क्रॉलिंग की आवश्यकता थी, कुछ को नहीं।

अतिरिक्त body या इनलाइन स्टाइल का एक गुच्छा रखने के बजाय, हम अपने निर्धारित AppBar / Header के नीचे overflow-y: scroll को अलग करके शिफ़्टिंग को ठीक करने में सक्षम थे। अब हमारे पास पृष्ठ सामग्री के लिए एक सदाबहार स्क्रॉलबार है, बल्कि पूरी विंडो के बजाय, मोडल / मेनू से कोई शिफ्टिंग नहीं है क्योंकि स्क्रॉलबार पृष्ठ सामग्री से जुड़ा है और body ।

संदर्भ के लिए हमारे डोम की तरह दिखता है:

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

और सीएसएस (हमारे हेडर की ऊंचाई 45px है):

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

cvocke 16 जुल॰ 2018

नमस्ते,

वर्तमान में मेरे पास यही समस्या है और मुझे यह स्वीकार करना चाहिए कि मैं उल्लिखित किसी भी समाधान में अपनी खुशी नहीं पा सकता हूं।

मैंने जो समझा, उसमें से Modal को स्क्रॉलबार का उपयोग करने की अनुमति नहीं है, जो समस्याग्रस्त है क्योंकि मैं उन्नत खोज करने के लिए Modal का उपयोग करता हूं और Modal हमेशा आवश्यकता नहीं होती है एक छोटी सामग्री है।

आपके द्वारा बताई गई समस्या और समाधानों के बारे में सोचकर, मैं सोच रहा था कि Modal , Dialog , Menu से संबंधित हर चीज के लिए स्क्रॉल - Menu और अन्य पॉपअप तत्व। डिफ़ॉल्ट रूप से, यह बूलियन संपत्ति झूठी होगी, लेकिन स्क्रॉलबार को घटक में प्रदर्शित करने की अनुमति देने के लिए सही हो सकता है।

यदि यह संभव नहीं है, तो एक ScrollBar घटक को एकमुश्त लागू कर सकते हैं, भले ही मैं पहले के विचार को पसंद करता हूं।

मुझे संदेह है कि यह काम करने की तुलना में आसान है। इसलिए मैं आपके द्वारा किए जा रहे असाधारण कार्य के लिए धन्यवाद देना चाहूंगा।

rememberYou 9 सित॰ 2018

👍1

FWIW मैं सिर्फ एक वैश्विक body { overflow-y: scroll } सेट करता हूं और सब कुछ अच्छी तरह से काम करने लगता है।

avdd 9 सित॰ 2018

👎1

@avdd यह मदद नहीं करता है क्योंकि यह आपको शरीर में स्क्रॉल करने की अनुमति देगा और मोडल में नहीं।

rememberYou 9 सित॰ 2018

👍1

@rememberYou modal निम्न स्तर का आदिम है, आप इसके बजाय संवाद का उपयोग करना चाह सकते हैं: https://material-ui.com/demos/dialogs/#scrolling -long-content।

oliviertassinari 9 सित॰ 2018

👎1

@rememberYou ModalManager ने overflow:hidden सीधे कंटेनर तत्व (निकाय) पर सेट किया जब मोडल दिखाई दे रहा है और मोडल समाप्त होने पर इसे रीसेट करता है, इसलिए, हाँ यह मेरे लिए काम करता है।

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

avdd 9 सित॰ 2018

@oliviertassinari समाधान के लिए धन्यवाद।
@ मेरे माफी माँगने पर, मैंने ModalManager साथ कोशिश नहीं की।

rememberYou 9 सित॰ 2018

@lorensr यह अभी भी एक मुद्दा है?

nathanmarks 10 सित॰ 2018

@oliviertassinari एक आखिरी बात, मैंने Dialog साथ कोशिश की, यह अच्छी तरह से काम करता है, लेकिन जब से मैं एक और विशेष डिजाइन चाहता हूं, मुझे Modals का उपयोग करना पसंद है।

मुद्दा यह है कि मेरे पास एक Modal (लॉग इन) है, जिसके पास एक दूसरे Modal (साइनअप) को खोलने के लिए एक लिंक है जो स्वयं लॉगिन पर लौटने के लिए एक लिंक है।

इस स्थिति में, क्या मुझे ModalManager का उपयोग आसानी से जोड़ने और निकालने के लिए Modal ? इस मुद्दे के विषय से बाहर निकलने के लिए क्षमा करें, मुझे इस विषय पर कोई दस्तावेज नहीं मिला।

rememberYou 10 सित॰ 2018

👎1

@nathanmark हाँ, मॉडल घटक डॉक्स पृष्ठों की तरह दिखता है अभी भी .mui-fixed उल्लेख नहीं करता है

lorensr 10 सित॰ 2018

3.5.1 का उपयोग करना - बंद करने से पहले डायलॉग बाईं ओर शिफ्ट हो जाता है।

यहाँ Reproducible https://material-ui.com/demos/dialogs/ - सरल डायलॉग डेमो खोलें और बंद करें।

परीक्षण के बाद, यह v3.3 में शुरू हुआ।

stephen099 14 नव॰ 2018

@ stephen099 रिपोर्टिंग के लिए धन्यवाद! मैं पुष्टि करता हूं, लेकिन यह एक अलग मुद्दा है।

oliviertassinari 22 नव॰ 2018

मैंने देखा है कि हेडर पर (नवीनतम मुई के साथ), mui-fixed वर्ग नामों में जोड़ा जाता है, लेकिन इसमें कोई स्टाइल नहीं दिया गया है (हेडर का निरीक्षण करके, कोई mui-fixed नियम लोड।

मैं सोच रहा हूं, कि यह 'एड पैडिंग' क्यों हो रही है, इसकी जरूरत क्यों है? मेरे लिए यह Menu घटक से टूट गया है।

मैं !important साथ css स्टाइल को ओवरराइड किए बिना इसे होने से कैसे रोकूँ? धन्यवाद

vajnorcan 27 फ़र॰ 2019

👍1

@vajnorcan mui-fixed वर्ग नाम मोडल घटक (मेनू द्वारा उपयोग किया गया) को इंगित करता है कि शरीर तत्व पर स्क्रॉल को लॉक करने पर तत्व स्थिति बदल जाएगी। हम अस्थायी पैडिंग-राइट स्टाइल के साथ स्क्रॉलबार चौड़ाई हटाने के लिए क्षतिपूर्ति करते हैं। क्या आप CodeSandbox पर न्यूनतम प्रजनन उदाहरण प्रदान कर सकते हैं? धन्यवाद।

oliviertassinari 27 फ़र॰ 2019

क्षमा करें, आप कहाँ रखें। एक मेनू खोलने के साथ मुझे यह समस्या है।

capsule5 13 मार्च 2019

@ capsule5 आपको इसे उस तत्व में जोड़ना होगा जो स्क्रॉलबार के मेनू मेन्यू पर अक्षम होने के कारण "कूदता है" (आमतौर पर यह दाईं ओर तय किया गया तत्व होना चाहिए) और इसका गद्दी आपके लिए संभाला जाएगा।

यह भी ध्यान दें कि, जैसा कि ऊपर बताया गया है, आपको इसे अपनी वैश्विक शैलियों में जोड़ने की आवश्यकता हो सकती है:

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

cvara 22 मार्च 2019

👍3

इस धागे में कोई प्रजनन नहीं है। मैं बंद कर रहा हूं।

@cvara हम # 9275 में इसका ट्रैक रखते हैं।

oliviertassinari 12 जुल॰ 2019

मुझे नहीं मिला, क्या यह हल है? मैंने v0.9 से v4 में अपग्रेड किया और अब जब मैं मोडल खोलता हूं तो मेरी सामग्री बाईं ओर कूद जाती है ( padding-right: 17px मिल रही है)? इसके लिए फिर से तैयार समाधान क्या है?

बाद में संपादित करें:

क्योंकि मेरे मामले में मेरे पास overflow-y: scroll !important; मुझे भी इस जम्पिंग समस्या को ठीक करने के लिए padding-right: 0px !important; जोड़ना था।

Cristy94 9 नव॰ 2019

👍5 ❤1

जिस तरह से मैंने तय किया वह मेरे घटक में disableScrollLock={ true } जोड़ रहा था :)

Toshiuk 27 नव॰ 2019

👍20 🎉10 🚀8 😄3 👎1

@ तोशीक कौन सा घटक?

wongjiahau 1 दिस॰ 2019

👍1

@wongjiahau मोडल घटक v4 +

sartios 4 दिस॰ 2019

आप मेन्यू में भी डिफॉल्टScrollLock जोड़ सकते हैं

jeronimomora 14 दिस॰ 2019

यह मेरे लिए भी प्रजनन है। जब से मैं मेनू आइटम जोड़ रहा हूं, तृतीय पक्ष घटकों का उपयोग करने के बाद से अक्षम कर रहा हूँ अक्षम अक्षम करें यह तय होना चाहिए। शायद पता चलता है कि स्क्रॉलबार वास्तव में प्रदर्शित होता है या नहीं।

archfz 14 दिस॰ 2019

@archfz क्या आपके पास प्रजनन है?

oliviertassinari 15 दिस॰ 2019

मैं इसे Select घटकों के उपयोग में देख रहा हूं। जब भी Select ड्रॉपडाउन खोला जाता है, तो overflow: hidden, padding-right: 15px को मेरे ऐप के मुख्य body टैग में जोड़ा जाता है। शैलियों को पछाड़ने के अलावा क्या इसका कोई समाधान है? मुझे लगता है कि यह अपेक्षित व्यवहार नहीं है

WholemealDrop 17 दिस॰ 2019

@WholemealDrop #

oliviertassinari 17 दिस॰ 2019

👍1

@oliviertassinari अहा स्पष्ट रूप से मेरे खोज कौशल

WholemealDrop 17 दिस॰ 2019

@oliviertassinari I ने कोर की समस्या को कम करने में कामयाबी हासिल की है। ऐसा लगता है कि किसी भी तरह गलत गणना होने पर यह प्रदर्शित होता है: 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 18 दिस॰ 2019

@archfz क्या आप कृपया एक कोडैंडबॉक्स बना सकते हैं? (आप डॉक्स उदाहरणों में से एक के साथ शुरू कर सकते हैं।)

mbrookes 18 दिस॰ 2019

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

archfz 18 दिस॰ 2019

@archfz क्षमा करें, यह छूट गया।

मैं यहाँ क्या देख रहा हूँ? मुझे किसी भी लेआउट परिवर्तन का अनुभव नहीं है।

mbrookes 8 जन॰ 2020

@archfz क्षमा करें, यह छूट गया।
मैं यहाँ क्या देख रहा हूँ? मुझे किसी भी लेआउट परिवर्तन का अनुभव नहीं है।

जब आप शीर्ष दाईं ओर वर्ण पर क्लिक करते हैं, तो यह मेनू आइटम के खुलने पर बाईं ओर चला जाता है और फिर मेनू आइटम बंद होने पर दाईं ओर वापस चला जाता है।

WholemealDrop 8 जन॰ 2020

क्या आप एक नया मुद्दा खोल सकते हैं? यह कुछ नया लगता है।

oliviertassinari 8 जन॰ 2020

@archfz ठीक है, यह टूलटिप के साथ एक संघर्ष है। आइए इसे नजरअंदाज करें।

oliviertassinari 11 जन॰ 2020

@oliviertassinari खैर हमें इसे अनदेखा नहीं करना चाहिए क्योंकि यह एक वास्तविक मुद्दा है। प्रतिक्रिया-व्यवस्थापक सामग्री UI का उपयोग करता है और यह वास्तव में बॉक्स से बाहर का मुद्दा है। मैंने यहाँ एक मुद्दा बनाया है https://github.com/mui-org/material-ui/issues/19203

archfz 12 जन॰ 2020

समाधान @Toshiuk द्वारा पुन:

मेनू, स्टाइलमेनु:
disableScrollLock={ true }
चुनते हैं:
MenuProps={{ disableScrollLock: true }}

हमें वास्तव में समाधान को आसानी से खोजने योग्य बनाने की आवश्यकता है! :-)

samheyman 1 मार्च 2020

👍10

जब मैं मेनू खोलता हूं, तो मुझे टूलबार के पृष्ठभूमि रंग के साथ समस्या होती है और स्क्रॉलबार अदृश्य हो जाता है

यहाँ उदाहरण है:
https://codesandbox.io/s/material-demo-nj80l

किसी को पता है कि यह कैसे ठीक है?

Risbot 9 मार्च 2020

बस निम्नलिखित सीएसएस जोड़ें
शरीर {पैडिंग-राइट: 0px; महत्वपूर्ण; }

sandunr 11 अप्रैल 2020

हैलो, मेरे ऐप में मैं इस समाधान का उपयोग करता हूं।
मैं अपने घटक <Menu> और अपने सीएसएस में disableScrollLock={true} disablePortal={true} id="custom" जोड़ता हूं
#custom { .MuiPopover-paper, .MuiPopover-paper { max-height: inherit !important; } }
यह पूरी तरह से मेरे मामले में काम करता है। मुझे उम्मीद है कि इस ट्रिक्स से मदद मिल सकती है।

Vincent-Alibert 22 अप्रैल 2020

मैंने डायलॉग्स के साथ काम करने में समान समस्याओं का अनुभव किया। निम्नलिखित एकमात्र समाधान है जो मैंने कोशिश की है कि दोनों सामग्री के स्थानांतरण को हटाते हैं और अभी भी अंतर्निहित पृष्ठ की स्क्रॉल को लॉक करते हैं / इसके स्क्रॉलबार को हटाते हैं।

उपाय:
अपने ऐप में सबसे बाहरी कंटेनर div या किसी भी बाहरी div (कोई भी कंटेनर जो आपके पूरे ऐप को एनकैप्सुलेट करता है) पर जाएं और उसकी चौड़ाई सेट करें:

width: calc(100vw - 1px);

1px 34px या किसी अन्य कम मूल्य के साथ प्रतिस्थापित किया जा सकता है। यह ऐसा कर देगा ताकि एक डायलॉग खोलने पर अंतर्निहित पृष्ठ की स्क्रॉल पट्टी छिप जाए, यदि मौजूद हो, और सामग्री की स्थिति में किसी भी प्रकार का बदलाव नहीं करेगा। स्क्रॉलिंग अभी भी अंतर्निहित पृष्ठ के लिए बंद है और स्क्रॉल करना आपके संवाद के लिए अभी भी संभव है।

fastlogin 18 मई 2020

अक्षम करें

आप सिर्फ शानदार हैं, धन्यवाद

cy-sachin-m 25 अग॰ 2020

😄1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Material-ui: [मोडल] स्क्रॉलबार और पैडिंग मुद्दा

उपाय

आपका पर्यावरण

संबंधित मुद्दों

8475 # 7431 # 6656 # 8710

सबसे उपयोगी टिप्पणी

सभी 47 टिप्पणियाँ

संबंधित मुद्दों