টুইটার বুটস্ট্র্যাপের জন্য মডেল আকার বাড়ান

Question

আমি মডেল ফর্মটির আকার পরিবর্তন করার বা তার পরিবর্তে চেষ্টা করছি - এটি আমার যে সামগ্রী সরবরাহ করে তা এখানে সাড়া দিন। আমি এটি একটি ফর্ম রেন্ডার করতে ব্যবহার করছি এবং নিজের প্রয়োজন হলে স্ক্রোলিংয়ের সাথে কাজ করতে পছন্দ করব।

আমি যে ফর্মটি রেন্ডার করি তার সম্ভবত অন্য 50px দরকার - কেবলমাত্র বোতামগুলি অনুপস্থিত।

সুতরাং আমি আমার অ্যাপ্লিকেশন। সিএসএসএসএস ফাইল (রেলগুলি ৩.২ ব্যবহার করে) mod

কোন চিন্তা?

Comments

আমার একই প্রশ্ন রয়েছে ... ক্রোম বলে যে উচ্চতার সম্পত্তি গৃহীত হয়েছে (ওভাররাইট করা বৈশিষ্ট্য হিসাবে মাঝের লাইনটি পাবেন না) তবে গণনা করা উচ্চতা একই থাকবে

— fespinozacast

আমি মনে করি এটি সাহায্য করতে পারে।

— সিঙ্ক্রো

Answer 1

আমার ঠিক একই সমস্যা ছিল, আপনি চেষ্টা করতে পারেন:

.modal-body {
    max-height: 800px;
}

আপনি যদি লক্ষ্য করেন যে স্ক্রোল-বারগুলি কেবলমাত্র মডেল ডায়ালগের বডি বিভাগে উপস্থিত হয়, এর অর্থ শুধুমাত্র শরীরের সর্বাধিক উচ্চতা সামঞ্জস্য করা দরকার।

Comments

মডেল-বডিটির জন্য সর্বাধিক উচ্চতা নির্ধারণ করা যথেষ্ট নয়, কারণ মডেলের নীচের অংশটি পর্দার বাইরে যেতে পারে। আমার সাথে সাফল্য ছিল:। আধুনিক {শীর্ষ: 5%; নীচে: 5%; } .মডাল-বডি {সর্বাধিক উচ্চতা: 100%; উচ্চতা: 85%; }

— সিসংগর ফাগিয়াল

এটি কাজ করার জন্য আমাকে উচ্চতা: 800px পরিবর্তে সর্বোচ্চ-উচ্চতা: 800px ব্যবহার করতে হয়েছিল।

— সাইবারনেটিক

Answer 2

বুটস্ট্র্যাপ 3 এ:

.modal-dialog{
  width:whatever
}

Comments

যে তারিখে প্রশ্নটি করা হয়েছিল, তা দিয়ে, আমি মনে করি না যে টিবি 3 একটি সমস্যা ছিল। তবে, যাই হোক না কেন, টিপটির জন্য আপনাকে ধন্যবাদ, এটি সত্যিই সহায়ক!

— ডেনিস ব্রাগা

কেবলমাত্র স্পষ্ট করতে, আপনি যদি কেবলমাত্র একটি নির্দিষ্ট মডেলের আকার নির্ধারণ করতে চান তবে কেউ এটি করতে পারেন: #modal_ID .modal-dialog { width: 800px }

— গ্রেগ এ

Answer 3

আপনার অবশ্যই এটি নিশ্চিত করতে হবে যে এটি # মাইমোডাল mod

Comments

লিঙ্কটি মারা গেল :(

— ড্যান

Answer 4

নতুন CSS3 'vh' (বা প্রস্থের জন্য 'vw') পরিমাপ (যা ভিউ পোর্টের ভগ্নাংশ হিসাবে উচ্চতা নির্ধারণ করে) ব্যবহার করুন:

.modal-body {
    max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

এইভাবে, আপনি যদি বুটস্ট্র্যাপের মতো কোনও প্রতিক্রিয়াশীল কাঠামো ব্যবহার করেন তবে আপনি সেই নকশাটি আপনার মডেলগুলিতেও রাখতে পারেন।

Answer 5

প্রস্থ এবং উচ্চতার জন্য দুটি পদ্ধতি মিশ্রণ করা এবং আপনার একটি ভাল হ্যাক রয়েছে:

সিএসএস:

#myModal .modal-body {max-height: 800px;}

jQuery:

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

এইটি আমি ব্যবহার করি। এটি প্রস্থ এবং উচ্চতা উভয়ের জন্য মার্জিন এবং স্ক্রোলবার সমস্যাগুলি স্থির করে তবে এটি এর সামগ্রীতে ফিট করার জন্য এটি মডেলের আকার পরিবর্তন করবে না।

আমি সাহায্য ছিল আশা করি!

Comments

আমি জিকুয়েরিটিকে কাজ করার চেষ্টা করেছি তবে আমার ভাগ্য হয়নি। তুমি কি সাহায্য করতে পারো? আমার কোথায় জিকুয়েরি ব্যবহার করা উচিত?

— স্যামুয়েল টেলর

মডেলের সর্বোচ্চ-উচ্চতা নীচের অর্ধেককে বিলুপ্ত করবে এবং স্ক্রোলযোগ্য নয়। (যেমন @ এমক্যাব্রাল প্রস্তাবিত)

— নাগেইটেক

Answer 6

সিএসএস ক্লাস ব্যবহার করে (আপনি স্টাইল ওভাররাইডও করতে পারেন - প্রস্তাবিত নয়):

(HTML)

<div class="modal-body custom-height-modal" >

(Css) ব্যবহার

.custom-height-modal {
  height: 400px;
}

Answer 7

আমি উত্তর পেয়েছি ... বিষয়টি হ'ল আপনি সর্বাধিক উচ্চতার বৈশিষ্ট্যটি ওভাররাইট করেছেন পাশাপাশি বুটস্ট্র্যাপ মোডালকেও 500px উচ্চতার সীমা ছাড়িয়ে পুনরায় আকার দেওয়া যেতে পারে

Comments

আমি। আধুনিক ক্লাসে সর্বোচ্চ-উচ্চতা চেষ্টা করেছি কিন্তু এটি কোনওভাবেই কাজ করে না। আপনি সম্ভবত আপনি ব্যবহৃত সিএসএস ভাগ করতে পারেন?

— এপি

.মডাল {উচ্চতা: 600px; সর্বাধিক উচ্চতা: 700px; }। ঠিক এটি

— ফেসপিনোসাকাস্ট

এই পদ্ধতির সাথে সমস্যাটি হ'ল পিছনের ওভারলেটি প্রসারিত হয় না, সুতরাং পপআপের একটি অংশ

— অ্যাক্সেসযোগ্য

Answer 8

বুটস্ট্র্যাপ বড় মডেল

<div class="modal-dialog modal-lg">

বুটস্ট্র্যাপ ছোট মডেল

<div class="modal-dialog modal-sm">

Answer 9

কেবল ".মডাল-বডি" উচ্চতা সেট করুন: 100% এটি আপনার সামগ্রী অনুযায়ী উচ্চতাটি স্বয়ংক্রিয়ভাবে সামঞ্জস্য করবে এবং আপনার স্ক্রিন অনুযায়ী "সর্বোচ্চ-উচ্চতা" রাখবে ...

Answer 10

আপনি কি আকারের প্যারামিটারটি ব্যবহার করে দেখেছেন:

return $modal.open({
  backdrop: 'static',     
  size: 'sm',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",

.চ্ছিক আকার

মডেলের দুটি twoচ্ছিক আকার রয়েছে, মোডিফায়ার ক্লাসের মাধ্যমে একটি। মডেল-সংলাপে স্থাপন করা।

1. ডিফল্ট: 600px
2. এসএম: 300px এর ছোট, প্রস্থ
3. lg: বৃহত্তর, 900px প্রস্থ

আপনি যদি কিছু আলাদা চান তবে বুটস্টারপ সিএসএস আপডেট করুন

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .modal-xy {  // custom
    width: xxxpx;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Answer 11

বুস্ট্র্যাপ> 4 এর জন্য এটি আমার পক্ষে কাজ করেছে:

.modal-content{
  width: 1200px;
}

আরও উন্নত সংস্করণ:

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

এখানে একটি কোডেন রয়েছে:

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

Answer 12

আপনার মোডেলটিতে modal1নিম্নলিখিত সিএসএসের একটি আইডি রয়েছে তা ধরে নিলে মডেলের উচ্চতা বাড়বে এবং কোনও ওভারফ্লো প্রদর্শিত হবে।

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}

Answer 13

উপরের কয়েকটি প্রস্থ এবং উচ্চতার নির্দিষ্ট আকারের (মডেলটিতে কোনও চিত্র প্রদর্শন করতে) প্রয়োজন হিসাবে চেষ্টা করেছিলাম এবং উপরের কেউই আমাকে সহায়তা করেনি আমি শৈলীগুলিকে ওভাররাইড করার সিদ্ধান্ত নিয়েছি এবং নীচে মূল <div> এ যুক্ত করেছি শ্রেণি = এতে "মডেল হাইড ফেইড ইন": অর্থাত্ মডেলের পটভূমির জন্য স্টাইল ট্যাগের প্রস্থ যুক্ত করা হয়েছে।

style="display: none; width:645px;"

এবং তারপরে মডেল-বডিটিতে নিম্নলিখিত 'স্টাইল' ট্যাগগুলি যুক্ত করেছেন:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

এখন কবজির মতো কাজ করে, আমি একটি চিত্র প্রদর্শন করছি এবং এখন এটি নিখুঁত ফিট fits

Comments

কেন এটিকে নিম্নমানের করা হয়েছিল? আপনি যখন মনে করেন যে কোনও ত্রুটি হয়েছে বা একটি অসত্য / সম্পর্কযুক্ত মন্তব্য করা হয়েছে তখন কিছু প্রতিক্রিয়া সহায়ক হবে।

— ফ্ল্যাশট্রেভ

Answer 14

এটি আমার পক্ষে কাজ করেছে:

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

নোট করুন যে আমার ক্ষেত্রে, আমি নেস্টেড মডেলগুলি করেছি, প্রত্যেকের নিয়ন্ত্রণ রয়েছে যার জন্য যখন আমি নেস্টেড মডেলের অভ্যন্তরে কন্ট্রোলের ডিসপ্লে টগল করি তখন বিভিন্ন উচ্চতা প্রয়োজন , তাই আমি সর্বোচ্চ-উচ্চতা প্রয়োগ করতে পারি না , পরিবর্তে উচ্চতা: 100% আমার পক্ষে ভাল কাজ করে।

Answer 15

Bootচ্ছিক বুটস্ট্র্যাপ ক্লাসগুলি modal-lgএবং modal-smযদি আপনি প্রতিক্রিয়াশীল কাঠামোর মধ্যে রাখতে চান তবে ভুলবেন না । এবং আপনার ফর্মের নীচে একটি ক্লিয়ারফিক্স যুক্ত করুন, এটি আপনার কাঠামোর উপর নির্ভরশীল হতে পারে।

Answer 16

আমি সম্প্রতি এটি চেষ্টা করেছিলাম এবং এটি সঠিক পেয়েছি: আশা করি এটি সহায়ক হবে

 .modal .modal-body{
        height: 400px;
    }

এটি আপনার মডেলের উচ্চতা সামঞ্জস্য করবে।

Answer 17

বুটস্ট্র্যাপ মডেলের আকার বাড়ানোর জন্য এখানে আরও একটি সহজ পদ্ধতি:

$(".modal-dialog").css("width", "80%");

মডেলের প্রস্থ স্ক্রিনের শতাংশের ক্ষেত্রে নির্দিষ্ট করা যেতে পারে। উপরের উদাহরণে আমি এটি আমার স্ক্রিনের প্রস্থের 80% এ সেট করে রেখেছি।

নীচে এটির একটি কার্যকারী উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>