केवल मोडल-बॉडी के लिए स्क्रॉल बार कैसे लगाएं?

Question

मेरे पास निम्नलिखित तत्व हैं:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

यह मोडल डायलॉग को कुछ इस तरह दिखाता है, मूल रूप से, यह पूरी तरह से स्क्रॉल बार डालता है modal-dialogऔर modal-bodyइसमें वह सामग्री नहीं है जिसे मैं प्रदर्शित करने की कोशिश कर रहा हूं।

छवि कुछ इस तरह दिखती है:

मुझे modal-bodyकेवल चारों ओर एक स्क्रॉल बार कैसे मिलेगा ?

मैंने असाइन style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"करने की कोशिश की है, modal-bodyलेकिन यह काम नहीं किया।

Comments

कृपया आपको बेहतर मदद देने के लिए एक कार्य नमूना दें, आप इसे करने के लिए bootply.com/new का उपयोग कर सकते हैं ।

— कार्लोस कैला

अगला, वैकल्पिक तरल पदार्थ हेडर और पाद ब्लॉक को मोडल के अंदर रखने की अनुमति दें ताकि शरीर को केवल स्क्रॉल करें: stackoverflow.com/questions/49173969/…

— leontalbot

Answer 1

आप स्थापित करने के लिए heightकी .modal-bodyऔर इसे देने के overflow-y: auto। इसके अलावा .modal-dialogअतिप्रवाह मूल्य को रीसेट करें initial।

कार्य नमूना देखें:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}

Comments

इसके लिए धन्यवाद। यह बहुत अच्छा काम करता है। सीएसएस में मेरे लिए कुछ स्पष्ट नहीं हो सकता है। मैंने मोडल-बॉडी को अधिकतम ऊंचाई प्रदान करने की कोशिश की: 65% जो काम नहीं करता है। आपके द्वारा प्रदान किया गया समाधान केवल तभी काम करता है जब मैं मोडल-बॉडी को निश्चित ऊँचाई प्रदान करता हूँ। क्या मोडल-डायलॉग को विंडो का 85% कहने का कोई तरीका नहीं है और मोडल-बॉडी को 90% मोडल-डायलॉग कहना चाहिए? लेकिन फिर से समाधान आप मेरे लिए काम करता है, अब के लिए प्रदान की है। धन्यवाद!

— सुबोध निजसेप

@SubodhNijsure देर से प्रतिक्रिया के लिए क्षमा करें। आप ऊँचाई को% में सेट नहीं कर सकते क्योंकि इसका अर्थ उसके माता-पिता का एक% होगा, इस मामले में अभिभावक .modal-content है और इसकी ऊँचाई उसके बच्चों पर निर्भर करती है। यही कारण है कि जब तक आप उनमें से एक को ऊंचाइयों पर सेट नहीं करते तब तक यह काम नहीं करेगा या तो आप .modal-content height या set .modal-body height सेट करें। यदि आप .modal- सामग्री की ऊँचाई सेट करते हैं, तो आप .modal-body की ऊँचाई को% में सेट कर पाएंगे और यह उसके माता-पिता का% होगा, इसलिए यदि आप इसे 100% से कम सेट करते हैं, तो रिक्त स्थान होगा। नीचे, चूंकि आप सभी .modal-content की ऊंचाई नहीं भर रहे हैं।

— कार्लोस कैला

ध्यान रखें कि CSS का initialकीवर्ड इंटरनेट एक्सप्लोरर के लिए काम नहीं करता है, हालांकि यह एज के लिए काम करता है।

— trysis

बस थोड़ा पॉइंटर: "ऊँचाई 250px" के बजाय जो कुछ फोन पर बदसूरत दिख सकते हैं जो केवल 230px ऊंचाई पर हैं, या परिदृश्य में नेबर के साथ कम हैं: बस उपयोग करें max-height: 80vh;जो कुल व्यूपोर्ट ऊंचाई का 80% है और केवल अधिकतम ऊंचाई के लिए है, यदि नहीं एक छोटा सा पॉपअप है

— Toskan

ठीक काम करता है, लेकिन मोडल को बंद करने के बाद, 'पैरेंट' विंडो पर लिंक अब क्लिक करने योग्य नहीं हैं ... निम्न कोड के साथ हल किया गया: .modal .modal-body {अधिकतम-ऊँचाई: 420px; ओवरफ्लो-वाई: ऑटो; }

— cwhisperer

Answer 2

यदि आप केवल IE 9 या उच्चतर का समर्थन कर रहे हैं, तो आप इस CSS का उपयोग कर सकते हैं जो आसानी से विंडो के आकार के पैमाने पर होगा। आपको अपने शीर्ष लेख या पाद लेख की ऊंचाई के आधार पर "200px" को ट्विक करने की आवश्यकता हो सकती है।

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Comments

[1] और [२] के अनुसार यह क्रोम, फ़ायरफ़ॉक्स और सफारी द्वारा भी समर्थित है। [१] developer.mozilla.org/en-US/docs/Web/CSS/… [२] डेवलपर.

— mozilla.org/en-US/docs/Web/CSS/…

नोट: यह समाधान शीर्ष या नीचे चयनित विकल्प के आधार पर शीर्ष लेख या पाद लेख के अंतर्गत दिखाई देता है। इस फिडेल को मैंने बनाया है देखें: jsfiddle.net/2qeo99k3/4 बिना css हैक के यह ठीक काम करता है बस इसे देखने के लिए फ़िडल में हटा दें यह काम करता है

— मार्क Roussel

पॉपओवर के लिए एक वैकल्पिक हल यहां पाया जा सकता है: stackoverflow.com/questions/45666828/…

— मार्क रौसेल

Answer 3

संयोजन समाधान @carlos calla और @jonathan marston के साथ समस्या हल हुई।

    /* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Answer 4

बूटस्ट्रैप संस्करणों के लिए> = 4.3

बूटस्ट्रैप 4.3 ने मॉडल्स में नया बिल्ट-इन स्क्रॉल फीचर जोड़ा है। यह केवल मोडल-बॉडी कंटेंट स्क्रॉल को बनाता है यदि कंटेंट का साइज़ अन्यथा पेज स्क्रॉल हो जाता है। इसका उपयोग करने के लिए, बस उसी मोड पर क्लास मोडल-डायलॉग-स्क्रॉल करने योग्य जोड़ें, जिसमें मोडल-डायलॉग क्लास हो।

यहाँ एक उदाहरण है:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 5

कार्लोस Calla के महान जवाब पर जोड़ना ।

.Modal-body की ऊंचाई सेट होनी चाहिए, लेकिन आप स्क्रीन के आकार के लिए यह सुनिश्चित करने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं।

.modal-body{
    height: 250px;
    overflow-y: auto;
}

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}

Comments

यह मान लेना कि मोबाइल डिवाइस पर ऊंचाई 400px या उससे अधिक होगी, दोषपूर्ण है। ऊंचाई का निर्धारण करने के लिए चौड़ाई का उपयोग करना संभव नहीं है। बहुत सारे उपयोग के मामले हैं जो इसे तोड़ने का कारण बनेंगे।

— स्ट्रॉबेरी

@ स्ट्राबेरी उन्होंने वास्तव में न्यूनतम ऊंचाई (न्यूनतम चौड़ाई नहीं) का उपयोग किया और यह सुनिश्चित किया कि दी गई ऊंचाई मीडिया-क्वेरी में न्यूनतम ऊंचाई से कम है। इसके अलावा, वह केवल अपने विचार के लिए एक उदाहरण दे रहा है क्योंकि ओपी क्या हासिल करना चाहता है इसके आधार पर मीडिया क्वेरी काफी भिन्न हो सकती है।

— कार्लोस कैला

Answer 6

वैकल्पिक : यदि आप नहीं चाहते कि मोडल खिड़की की ऊँचाई से अधिक हो और .modal-body में स्क्रॉलबार का उपयोग करें, तो आप इस उत्तरदायी समाधान का उपयोग कर सकते हैं। एक कार्यशील डेमो यहां देखें: http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

Answer 7

मुझे पता है कि यह एक पुराना विषय है लेकिन इससे किसी और की मदद हो सकती है।

मैं मोडल-संवाद तत्व स्थिति को निर्धारित करके शरीर को स्क्रॉल करने में सक्षम था। और चूंकि मुझे ब्राउज़र विंडो की सही ऊंचाई कभी नहीं पता होगी, इसलिए मैंने उस जानकारी को लिया जिसके बारे में मुझे यकीन था, हेडर की ऊंचाई और फुटर। मैं तब मोडल-बॉडी एलिमेंट के टॉप और बॉटम मार्जिन को उन ऊंचाइयों से मिलाने में सक्षम था। इसके बाद मैं जिस परिणाम की तलाश में था, उसका उत्पादन किया। मैंने अपना काम दिखाने के लिए एक बेला फेंक दी।

इसके अलावा, यदि आप एक पूर्ण स्क्रीन संवाद चाहते हैं, तो बस चौड़ाई पर टिप्पणी करें: ऑटो; .modal-dialog.full- स्क्रीन अनुभाग के अंदर।

https://jsfiddle.net/lot224/znrktLej/

और यहाँ सीएसएस है जो मैं बूटस्ट्रैप डायलॉग को संशोधित करने के लिए उपयोग करता था।

.modal-dialog.full-screen {
    position:fixed;
    //width:auto;  // uncomment to make the width based on the left/right attributes.
    margin:auto;                        
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.modal-dialog.full-screen .modal-content {
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:10px;
}

.modal-dialog.full-screen .modal-content .modal-header {
        height:55px;  // adjust as needed.
}

.modal-dialog.full-screen .modal-content .modal-body {
        overflow-y: auto;
          position: absolute;
          top: 0;
          bottom: 0;
        left:0;
        right:0;
          margin-top: 55px; // .modal-header height
          margin-bottom: 80px;  // .modal-footer height
}

.modal-dialog.full-screen .modal-content .modal-footer {
        height:80px;  // adjust as needed.
        position:absolute;
        bottom:0;
        left:0;
        right:0;
}

Answer 8

या सरल आप अपने टैग के बीच पहले डाल सकते हैं, फिर सीएसएस क्लास में।

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>

Answer 9

#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

का उपयोग max-heightके साथ vhपर इकाई के रूप में modal-bodyया के एक आवरण div के अंदर modal-body। modal-bodyउपयोगकर्ता द्वारा विंडो का आकार बदलने पर यह स्वचालित रूप से या रैपिंग डिव (इस उदाहरण में) की ऊंचाई का आकार बदल देगा ।

vh व्यूपोर्ट ऊंचाई के लिए व्यूपोर्ट आकार का 1% का प्रतिनिधित्व करने वाली लंबाई इकाई है।

vhइकाई के लिए ब्राउज़र संगतता चार्ट ।

उदाहरण: https://jsfiddle.net/q3xwr53f/

Answer 10

मेरे लिए जो काम किया है, वह 100% की ऊंचाई तय कर रहा है, जिससे ऑटो को उम्मीद है कि इससे मदद मिलेगी

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>

Answer 11

शरीर की ऊंचाई के आनुपातिक ऊंचाई सेट करने के लिए एक सरल js समाधान:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

शरीर की ऊंचाई 100% होनी चाहिए:

html, body {
    height: 100%;
    min-height: 100%;
}

मैंने शरीर के 80% हिस्से को मोडल बॉडी सेट किया है, यह निश्चित रूप से अनुकूलित हो सकता है।

आशा करता हूँ की ये काम करेगा।

Answer 12

नवीनतम बूटस्ट्रैप संस्करण में मोडल बॉडी को स्क्रॉल करने योग्य बनाने के लिए एक वर्ग है।

.modal-संवाद-स्क्रॉल करने के लिए .modal-संवाद ।

मोडल बॉडी स्क्रॉल करने योग्य सामग्री के लिए बूटस्ट्रैप मोडल लिंक

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>