কীভাবে কেবল মডেল-বডি জন্য স্ক্রোল বার স্থাপন করবেন?

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

আপনাকে আরও ভাল সহায়তা দেওয়ার জন্য দয়া করে একটি কাজের নমুনা দিন, আপনি এটি করতে বুটপ্লিও / নতুন ব্যবহার করতে পারেন ।

— কার্লোস কলা

: এর পরে, মোডাল যাতে শুধু শরীর স্ক্রল ভিতরে ঐচ্ছিক তরল হেডার এবং ফুটার ব্লক অনুমতি 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

এর জন্য ধন্যবাদ. এটি দুর্দান্ত কাজ করে। CSS এ আমার কাছে কিছু পরিষ্কার হতে পারে না। আমি মডেল-বডি সর্বাধিক উচ্চতা নির্ধারণ করার চেষ্টা করেছি: 65% যা কাজ করে না। আপনি প্রদত্ত সমাধান কেবল তখনই কাজ করে যদি আমি মডেল-বডিকে নির্দিষ্ট উচ্চতা নির্ধারণ করি। মোডাল-ডায়লগ বলার উপায় নেই কি 85% উইন্ডো লাগে এবং মডেল-বডিটি 90% মোডাল-ডায়লগ বলতে দখল করে? তবে আবার সমাধান আপনি আমার জন্য কাজ করে, আপাতত। ধন্যবাদ!

— সুবোধ নিজসুর

@ সুবোধনিজসুর দেরীতে প্রতিক্রিয়া জন্য দুঃখিত। আপনি উচ্চতায়% নির্ধারণ করতে পারবেন না কারণ এর অর্থ তার পিতামাতার এক% হবে, এক্ষেত্রে পিতা বা মাতা হয় al আধুনিক সামগ্রী এবং এর উচ্চতা তার বাচ্চাদের উপর নির্ভর করে। এ কারণেই আপনি যদি কোনওটির উচ্চতা নির্ধারণ না করেন তবে এটি কাজ করবে না। হয় আপনি। উপাদান-সামগ্রীর উচ্চতা সেট করুন বা। শারীরিক দৈর্ঘ্যের উচ্চতা সেট করুন। আপনি যদি। উপাদান-সামগ্রীর উচ্চতা সেট করে থাকেন তবে আপনি% তে .মডাল-বডির উচ্চতা সেট করতে সক্ষম হবেন এবং এটি এর প্যারেন্টের এক% হবে তাই আপনি যদি এটি 100% এর চেয়ে কম সেট করেন তবে সেখানে ফাঁকা জায়গা থাকবে you নীচে, যেহেতু আপনি সমস্ত। উপাদান-সামগ্রীর উচ্চতা পূরণ করছেন না।

— কার্লোস কেলা

মনে রাখবেন যে সিএসএসের initialকীওয়ার্ডটি ইন্টারনেট এক্সপ্লোরারের জন্য কাজ করে না, যদিও এটি এজের পক্ষে কাজ করে।

— ট্রাইসিস

কেবলমাত্র একটি সামান্য পয়েন্টার: "উচ্চতা 250px" এর পরিবর্তে যা কেবলমাত্র 230px উচ্চতার কিছু ফোনে বা ল্যান্ডস্কেপে নববারের চেয়ে কম দেখতে কুৎসিত দেখা যায়: max-height: 80vh;মোট ভিউপোর্টের উচ্চতার 80% এবং কেবল সর্বোচ্চ উচ্চতার জন্য ব্যবহার করুন, যদি তা না হয় একটি ছোট পপআপ

— তোসকান

সূক্ষ্মভাবে কাজ করে, তবে মডেলটি বন্ধ করার পরে, 'প্যারেন্ট' উইন্ডোতে থাকা লিঙ্কগুলি আর ক্লিকযোগ্য নয় ... নিম্নলিখিত কোডের সাথে সমাধান করা হয়েছে: .মডাল। আধুনিক-শরীর {সর্বোচ্চ-উচ্চতা: 420px; ওভারফ্লো-ওয়াই: অটো; }

— গ্লোবাল স্পিকারটি

Answer 2

যদি আপনি কেবল আই 9 বা ততোধিক সমর্থন করে থাকেন তবে আপনি এই সিএসএসটি ব্যবহার করতে পারেন যা উইন্ডোটির আকারকে সাবলীলভাবে স্কেল করবে। আপনার শিরোনাম বা পাদলেখের উচ্চতার উপর নির্ভর করে আপনাকে "200px" টিউক করতে হবে।

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

Comments

[1] এবং [2] এর মতে এটি ক্রোম, ফায়ারফক্স এবং সাফারি দ্বারাও সমর্থিত। [1] বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

দ্রষ্টব্য: এই সমাধানটি পপওভারটি শীর্ষ বা নীচের অংশে নির্বাচিত বিকল্পের উপর নির্ভর করে শিরোলেখ বা পাদলেখকের নীচে প্রদর্শিত হবে যা আমি তৈরি করেছি এই ঝাঁকুনি দেখুন: jsfiddle.net/2qeo99k3/4 CSS হ্যাক ব্যতীত ঠিক কাজ করে এটি দেখতে ফিডলটিতে অপসারণ এটি কাজ করে

— মার্ক রুসেল

পপওভারটির জন্য একটি কার্যপ্রণালী এখানে পাওয়া যাবে: stackoverflow.com/questions/45666828/…

— মার্ক রুসেল

Answer 3

কম্বাইন্ড সলিউশন @ কার্লোস কলা এবং @ জোনাথন মার্স্টন দিয়ে সমস্যার সমাধান হয়েছে।

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

Answer 4

বুটস্ট্র্যাপ সংস্করণগুলির জন্য> = 4.3

বুটস্ট্র্যাপ ৪.৩ মডেলগুলিতে নতুন অন্তর্নির্মিত স্ক্রোল বৈশিষ্ট্য যুক্ত করেছে। এটি কেবলমাত্র মডেল-বডি সামগ্রীকে স্ক্রোল করে তোলে যদি সামগ্রীর আকার অন্যথায় পৃষ্ঠাটিকে স্ক্রোল করে তোলে। এটি ব্যবহার করার জন্য, শুধু ক্লাস যোগ মোডাল-ডায়ালগ-স্ক্রোলযোগ্য একই DIV আছে হয়েছে যে মোডাল-ডায়ালগ বর্গ।

এখানে একটি উদাহরণ:

<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{
    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 শরীরের একটি স্ক্রলবার ব্যবহার করতে মোডাল না চান তাহলে, আপনি এই প্রতিক্রিয়াশীল সমাধান ব্যবহার করতে পারেন। এখানে একটি কার্যকারী ডেমো দেখুন: 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

আমি জানি এটি একটি পুরানো বিষয় তবে এটি অন্য কাউকে সাহায্য করতে পারে।

আমি মডেল-ডায়ালগ উপাদান অবস্থান স্থির করে শরীরের স্ক্রোল তৈরি করতে সক্ষম হয়েছি। এবং যেহেতু আমি কখনই ব্রাউজার উইন্ডোটির সঠিক উচ্চতা জানতে পারি না, তাই আমি নিশ্চিত যে তথ্যটি নিশ্চিত করেছিলাম, শিরোনাম এবং পাদচরণের উচ্চতা। আমি তখন মডেল-বডি এলিমেন্টের শীর্ষ এবং নীচের মার্জিনগুলি সেই উচ্চতাগুলির সাথে মেলে তুলতে সক্ষম হয়েছি। এটি তখন ফলাফলটি আমি সন্ধান করছিলাম। আমি আমার কাজ দেখানোর জন্য একত্রে একটি পাখি ছুড়েছিলাম।

এছাড়াও, আপনি যদি একটি পূর্ণ স্ক্রিন ডায়ালগ চান তবে প্রস্থটিকে কেবল মন্তব্য করুন: অটো; .মডাল-ডায়ালগ.ফুল-স্ক্রিন বিভাগের ভিতরে।

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একটি ব্যবহারকারী উইন্ডো রিসাইজ যখন বা মোড়ানো Div (এই উদাহরণে মধ্যে) স্বয়ংক্রিয়ভাবে।

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

দেহের উচ্চতার সমানুপাতিক মডেল উচ্চতা নির্ধারণের জন্য একটি সহজ জেএস সমাধান:

$(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

সর্বশেষতম বুটস্ট্র্যাপ সংস্করণে মডেল বডি স্ক্রোলযোগ্য করার জন্য একটি বর্গ রয়েছে।

.মডাল- সংলাপ- । মোডাল-ডায়ালগ থেকে স্ক্রোলযোগ্য ।

মডেল বডি স্ক্রোলযোগ্য সামগ্রীর জন্য বুটস্ট্র্যাপ মডেল লিঙ্ক

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