স্ক্রোল বার ছাড়াই বিকল্পগুলির সাথে ফিট করার জন্য এর উচ্চতা সামঞ্জস্য করতে একাধিক-নির্বাচন করুন

Question

স্পষ্টতই এটি কাজ করে না:

   select[multiple]{
     height: 100%;
   }

এটি নির্বাচনকে 100% পৃষ্ঠার উচ্চতা দেয় ...

auto হয় না কাজ করে, আমি এখনও উল্লম্ব স্ক্রোলবার পেতে।

অন্য কোন ধারণা?

Comments

আমি মনে করি আপনি কিছু জাভাস্ক্রিপ্ট ব্যবহার করে আটকে গেছেন। আমি বিশ্বাস করি না যে একটি নির্বাচন করা বাক্স স্বয়ংক্রিয়ভাবে কেবল বিষয়বস্তুগুলি অন্তর্ভুক্ত করার জন্য CSS- প্রসারিত করতে পারে।

— এলোমেলো_ ব্যবহারকারীর_নাম

বিশুদ্ধ সিএসএস সমাধান: stackoverflow.com/a/55969271/7910454

— leonheess

Answer 1

আমার ধারণা আপনি sizeগুণটি ব্যবহার করতে পারেন । এটি সাম্প্রতিক সমস্ত ব্রাউজারগুলিতে কাজ করে।

<select name="courses" multiple="multiple" size="30" style="height: 100%;">

Comments

হাই, প্রশ্নটির মধ্যে কাজ না করার বিষয়ে কীভাবে এটি আলাদা?

— গ্র্যাভিট করুন

হাই, এটি আলাদা কারণ এটি আকারের বৈশিষ্ট্যটি মূর্ত করে। প্রাথমিক প্রশ্নটি কেবল উচ্চতার বৈশিষ্ট্যকে বোঝায়

— অ্যালেক্স

আহ, ঠিক আছে. এটি বাক্সটি সামগ্রীগুলির আকারের আকারে সঙ্কুচিত করে না, আপনাকে ম্যানুয়ালি নম্বর আকারের মানটি নির্ধারণ করতে হবে, আপনি যদি জানেন যে কতগুলি বিকল্প রয়েছে তবে সমস্যাটি আরও বেশি যদি বিকল্পগুলির গতিশীল সংখ্যা থাকে । আপনি যখন বাক্সটি জনপ্রিয় করেন তখন আপনাকে আকারের আকারটি নির্দিষ্ট করতে হবে। আমি এখন দেখছি, স্পষ্ট করার জন্য ধন্যবাদ।

— গ্র্যাভিট করুন

উহু চলো! আপনি যদি সার্ভারে "জনবহুল" হন তবে আপনি জানেন যে সেখানে কতজন থাকবে। এবং আপনি যদি এজেএক্স ব্যবহার করে "পপুলেট" করতে পারেন তবে একটি সাধারণ বৈশিষ্ট্য পরিবর্তন করা কোনও চ্যালেঞ্জ হবে না be এমনকি আপনি "পপুলেটিং" এর পরে জেএসে বিকল্পগুলিও গণনা করতে পারেন।

— টমাসজ গ্যান্ডোর

এটি কাজ করেছে, তবে আকার অনুসারে <সিলেক্ট> এর উচ্চতা বৃদ্ধি পেয়েছে এবং ফলস্বরূপ আমার লেআউটটি বিকৃত করছে। ; (-

— শুভম

Answer 2

আপনি ট্যাগের sizeবৈশিষ্ট্যটি ব্যবহার করে এটি করতে পারেন select। মনে করুন আপনার কাছে 8 টি বিকল্প রয়েছে, তবে আপনি এটি পছন্দ করুন:

<select name='courses' multiple="multiple" size='8'>

Comments

এটি কাজ করেছে, তবে আকার অনুসারে <সিলেক্ট> এর উচ্চতা বৃদ্ধি পেয়েছে এবং ফলস্বরূপ আমার লেআউটটি বিকৃত করছে। ; (

— shubham

CSS এ এই মানটি কীভাবে নির্দিষ্ট করবেন?

— লেই ইয়াং

Answer 3

পুরানো, তবে jquery প্রয়োজন ছাড়াই আপনি যা করছেন তা এটি করবে। লুকানো ওভারফ্লো স্ক্রোলবার থেকে মুক্তি পেয়ে যায় এবং জাভাস্ক্রিপ্ট এটিকে সঠিক আকার দেয়।

<select multiple='multiple' id='select' style='overflow:hidden'>
<option value='foo'>foo</option>
<option value='bar'>bar</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='xyz'>xyz</option>
</select>

এবং জাভাস্ক্রিপ্টের একটি ক্ষুদ্র পরিমাণ

var select = document.getElementById('select');
select.size = select.length;

Answer 4

JQuery জন্য আপনি এটি চেষ্টা করতে পারেন। আমি সর্বদা নিম্নলিখিতটি করি এবং এটি কার্যকর হয়।

$(function () {
   $("#multiSelect").attr("size",$("#multiSelect option").length);
});

Answer 5

আপনি এটি কেবল জাভাস্ক্রিপ্ট / জিকুয়েরিতেই করতে পারেন, আপনি নিম্নলিখিত জিকুয়েরির সাহায্যে এটি করতে পারেন (ধরে নিবেন যে আপনি আপনার নির্বাচিতটিকে মাল্টিসিলেটের একটি আইডি দিয়েছেন):

$(function () {
    $("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});

ডেমো: http://jsfiddle.net/AZEFU/

Comments

সারি উচ্চতার উপর নির্ভর না করে একই ধারণা:$('select.expandable').each(function() { $(this).attr('size', $(this).find('option').length) })

— ফ্রান্সেস্ক রোজাস

@ ফ্রান্সেসেকরোস পারফেক্ট! দুঃখিত এটি গ্রহণযোগ্য উত্তর হওয়ার পরিবর্তে একটি মন্তব্যে সমাহিত করা হয়েছে।

— নিক

Answer 6

আমি জানি প্রশ্নটি পুরানো, তবে কীভাবে বিষয়টি বন্ধ নয় আমি আমার সহায়তা দেব।

"আকার" বৈশিষ্ট্যটি আপনার সমস্যার সমাধান করবে।

উদাহরণ:

<select name="courses" multiple="multiple" size="30">

Comments

প্রদানের ক্ষেত্রে সর্বদা 30 টি বিকল্প থাকে।

— অ্যান্ডার্স লিন্ডন

Answer 7

selectoptgroupপ্রতিটি এক লাইন লাগে যা থাকতে পারে :

<select id="list">
  <optgroup label="Group 1">
    <option value="1">1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="2">2</option>
    <option value="3">3</option>
  </optgroup>
</select>
<script>
  const l = document.getElementById("list")
  l.setAttribute("size", l.childElementCount + l.length)
</script>

এই উদাহরণে মোট sizeহয় (1+1)+(1+2)=5।

Comments

উপরের দুটি উত্তরই প্রযুক্তিগতভাবে সঠিক, তবে এটি আরও আকর্ষণীয় উত্তর।

— রাসেলম্যানিয়া

আমি এই উত্তরটি পছন্দ করি কারণ আমি জানি না তালিকায় কয়টি আইটেম উপস্থিত হবে। তবে আমি কেবল সেট করেছি: l.setAttribute ('আকার', l.childElementCount +1); (উপরের কোড হিসাবে দৈর্ঘ্যের দ্বিগুণ নয়)

— রবার্ট অ্যাকম্যান n

@ রবার্টআচম্যান এটি আকার দ্বিগুণ হয় না। এটি <optgroup>s এবং <option>s এর সংখ্যার যোগফল ।

— আন্দ্রেই নেমচেনকো

Answer 8

আপনি সাধারণ জাভাস্ক্রিপ্ট দিয়ে এটি করতে পারেন ...

<select multiple="multiple" size="return this.length();">

... বা রেকর্ডের সংখ্যা অবধি উচ্চতা সীমাবদ্ধ করুন ...

<select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;">

Comments

স্পষ্টতই, এটি আর কাজ করে না। আমার কাজ প্রায় $('#firstSelect').attr('size', $('#firstSelect').length);। এই

— ঝাঁকুনিটি দেখুন

Answer 9

স্ক্রোলবারটি সরাতে নিম্নলিখিত সিএসএস যুক্ত করুন:

select[multiple] {
    overflow-y: auto;
}

এখানে একটি স্নিপেট রয়েছে:

select[multiple] {
  overflow-y: auto;
}

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select multiple size="3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Answer 10

ব্যবহার আকার অ্যাট্রিবিউট সবচেয়ে বাস্তবসম্মত সমাধান কিন্তু সেখানে quirks যখন এটি প্রয়োগ করা হয় হয় নির্বাচন শুধুমাত্র দুই বা তিন বিকল্প সহ উপাদান।

• "0" বা "1" এ আকারের বৈশিষ্ট্যটির মান সেট করা বেশিরভাগ ক্ষেত্রে একটি ডিফল্ট নির্বাচন উপাদান (ড্রপডাউন) রেন্ডার করে।
• "1" এর চেয়ে বড় একটি মানকে আকারের বৈশিষ্ট্য নির্ধারণ করা বেশিরভাগই কমপক্ষে চারটি আইটেম প্রদর্শন করতে সক্ষম উচ্চতা সহ একটি নির্বাচনী তালিকা রেন্ডার করে। এটি কেবল দুটি বা তিনটি আইটেম সহ তালিকাগুলিতে প্রযোজ্য, যা অনিচ্ছাকৃত শ্বেত-স্থানের দিকে নিয়ে যায়।

সাধারণ জাভাস্ক্রিপ্টটি সঠিক মানটির আকারের বৈশিষ্ট্যটি স্বয়ংক্রিয়ভাবে সেট করতে ব্যবহার করা যেতে পারে , উদাহরণস্বরূপ এই ভাণ্ডারটি দেখুন ।

$(function() {
    $("#autoheight").attr("size", parseInt($("#autoheight option").length)); 
});

উপরে উল্লিখিত হিসাবে, কেবল দুটি বা তিনটি বিকল্প থাকলে এই সমাধানটি সমস্যার সমাধান করে না।

Comments

এই সমাধানটির জন্য jQuery প্রয়োজন এবং এইভাবে আমার মতে "সাধারণ জাভাস্ক্রিপ্ট" নয়। এছাড়াও, এই কোডটি ইতিমধ্যে পূর্ববর্তী উত্তরে প্রদর্শিত হয়েছে ..

— হ্যান্ডেল করুন

Answer 11

বন্ধুরা: আপনি যদি কোনও ডিবি থেকে ডেটা পুনরুদ্ধার করেন: আপনি এটিকে $ রেজিস্টারগুলি = * _নুম_স (রেজাল্ট_কোয়ারি) বলতে পারেন

<select size=<?=$registers + 1; ?>"> 

Answer 12

আমার সম্প্রতি এই প্রয়োজন ছিল এবং এই স্ক্রিপ্টটি তৈরি করতে এই প্রশ্ন থেকে অন্যান্য পোস্ট ব্যবহার করেছি:

$("select[multiple]").each(function() {
  $(this).css("height","100%")
    .attr("size",this.length);
})

Answer 13

বিকল্পগুলির সংখ্যার সাথে সমস্ত একাধিক নির্বাচনের আকার (উচ্চতা) সামঞ্জস্য করতে jQuery ব্যবহার করুন:

$('select[multiple = multiple]').each(function() {
    $(this).attr('size', $(this).find('option').length)
})

Answer 14

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

<?php $count = count($array); ?>
<select size="<?php echo $count; ?>" style="height:100%;">
<?php foreach ($array as $item){ ?>
    <option value="valueItem">Name Item</option>
<?php } ?>
</select>

Answer 15

একটি নির্বাচিত বাক্সটি যেভাবে রেন্ডার করা হয় তা ব্রাউজার থেকেই নির্ধারিত হয়। সুতরাং প্রতিটি ব্রাউজার আপনাকে অন্য উচ্চতায় অপশন তালিকা বাক্সের উচ্চতা প্রদর্শন করবে। আপনি এটি প্রভাবিত করতে পারবেন না। আপনি যে পরিবর্তন করতে পারবেন তার একমাত্র উপায় হ'ল স্ক্র্যাচ থেকে একটি নিজস্ব নির্বাচন করা।

Answer 16

এখানে একটি নমুনা প্যাকেজ ব্যবহার রয়েছে, যা লারাভেল সম্প্রদায়টিতে বেশ জনপ্রিয়:

{!! Form::select('subdomains[]', $subdomains, null, [
    'id' => 'subdomains',
    'multiple' => true,
    'size' => $subdomains->count(),
    'class' => 'col-12 col-md-4 form-control '.($errors->has('subdomains') ? 'is-invalid' : ''),
]) !!}

প্যাকেজ: https://laravelcollective.com/

Comments

এটি লারাভেল নয়, এটি একটি লারাভেল প্যাকেজ।

— ইমোলেটিয়ি

সংশোধন করার জন্য ধন্যবাদ। আমি পোস্ট আপডেট করতে যাচ্ছি।

— সিনান এলডেম