সিলেক্ট 2 ইনপুটটির প্রস্থ নির্ধারণ করুন (কৌণিক-ইউআই নির্দেশিকার মাধ্যমে)

Question

এই প্লাঙ্কার (সিলেক্ট 2 + অ্যাঙ্গুল্যাট-ইউআই) কাজ করতে আমার সমস্যা হচ্ছে।

http://plnkr.co/edit/NkdWUO?p=preview

স্থানীয় সেটআপ, আমি select2 কাজ পেতে, কিন্তু আমি প্রস্থ বর্ণনা অনুযায়ী সেট করতে পারে না ডক্স । এটি ব্যবহার করা খুব সংকীর্ণ।

ধন্যবাদ.

সম্পাদনা করুন: মনে করবেন না যে plnkr, আমি এখানে একটি কাজের ফিডল পেয়েছি http://jsfiddle.net/pEFy6/

দেখে মনে হচ্ছে এটি প্রথম উপাদানটির প্রস্থে পড়ার জন্য সিলেক্ট 2 এর আচরণ। আমি বুটস্ট্র্যাপের মাধ্যমে প্রস্থ নির্ধারণ class="input-medium"করতে পারি। তবে কেন কৌণিক-ইউআই কনফিগার প্যারামিটার নেয় না তা নিশ্চিত না।

Comments

আপনি ইতিমধ্যে যা চেষ্টা করেছেন আরও কি আরও সুনির্দিষ্ট হতে পারেন? নির্বাচিত লাইব্রেরি (যার উপর ভিত্তি করে সিলেক্ট 2 নির্ভর করে) এইচটিএমএল / সিএসএসে প্রদত্ত প্রস্থের ভিত্তিতে একটি প্রস্থ তৈরি করবে।

— অ্যাডাম গ্রান্ট

Answer 1

উপাদানগুলির প্রস্থ সংরক্ষণের জন্য আপনাকে সমাধান করতে অ্যাট্রিবিউট প্রস্থ নির্দিষ্ট করতে হবে

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

Comments

"(" # মাইলেক্ট ") select নির্বাচন করুন 2 ({স্থানধারক: 'নির্বাচন করুন দেশ', প্রস্থ: '192px'}); আইই দিয়ে আমার সমস্যাটি সমাধান করুন এবং এফএফ এবং ক্রোমে কোনও প্রভাব ফেলবে না! ধন্যবাদ!

— অ্যাড্রিয়ান পি।

হ্যাঁ. আমি লেখক github.com/godbasin/vue-select2/issues/11

— shinriyo

Answer 2

আমার ক্ষেত্রে সিলেক্ট 2 সঠিকভাবে খুলতে হবে যদি সেখানে শূন্য বা আরও বেশি পিল থাকে।

তবে যদি এখানে এক বা একাধিক বড়ি থাকে এবং আমি সেগুলি মুছে ফেলি তবে এটি ছোট আকারে সঙ্কুচিত হবে। আমার সমাধানটি সহজভাবে ছিল:

$("#myselect").select2({ width: '100%' });      

Comments

সিলেক্ট 2 সংস্করণ 4.0.0 ব্যবহার করে সর্বোত্তম উত্তর

— স্টিভ

কেন এটি $ ("# মাইলেক্ট") থেকে ভাল select নির্বাচন করুন 2 ({প্রস্থ: 'সমাধান'}); ? (একই মনে হয়)

— রিকার্ডো ভিগাটি

@ রিকার্ডোভিগাত্তি: প্রস্থ: 'সমাধান' পৃষ্ঠাটির লোড নিয়ে কেবল একবার কাজ করে তবে পুনরায় আকার দেওয়ার জন্য নয়। যদি আপনার প্রতিক্রিয়াশীল ডিজাইনগুলি ব্যবহার করা হয় তবে তা কৌতুকটি করতে পারে না

— ফ্যাবিয়ান শোনার

resolveআমার জন্য কাজ করেনি - 100% `করেছে। এই যে আধা ঘন্টা আশাবাদী একটি উত্তর "সমাধান" খুঁজছেন। ধন্যবাদ :)

— দারাগ এনরাট

এটি এখন পর্যন্ত সেরা উত্তর। তবে এখন, আমার জন্য, অনুসন্ধান ক্ষেত্রটি সমস্ত প্রস্থ পূরণ করে না। এটি সংশোধন করার কোনও সহজ উপায়?

— টিএনটি

Answer 3

এটি একটি পুরানো প্রশ্ন তবে নতুন তথ্য এখনও পোস্ট করার মতো ...

সিলেপ 2 সংস্করণ 3.4.0 দিয়ে শুরু করে এমন একটি বৈশিষ্ট্য রয়েছে dropdownAutoWidthযা সমস্যাটি সমাধান করে এবং সমস্ত বিজোড় কেস পরিচালনা করে। নোট করুন এটি ডিফল্ট হিসাবে নেই। এটি ব্যবহারকারীকে নির্বাচনগুলি করার সাথে সাথে এটি গতিশীলরূপে পুনরায় আকার দেয়, allowClearযদি সেই বৈশিষ্ট্যটি ব্যবহৃত হয় তবে এটির প্রস্থ যুক্ত হয় এবং এটি স্থানধারক পাঠ্যটি সঠিকভাবে পরিচালনা করে।

$("#some_select_id").select2({
    dropdownAutoWidth : true
});

Comments

এটি বেশ ভালভাবে কাজ করে ... আপনি যদি স্থানধারক ব্যবহার করছেন, যদি আপনি থাকেন তবে আপনার বিকল্পগুলি যদি স্থানধারকের চেয়ে ছোট হয় তবে স্থানধারক পাঠ্য কেটে যাবে :(

— মিঃপাওয়ারগেমারবিআর

Answer 4

নির্বাচন করুন V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

Answer 5

নির্বাচন> এর সাথে 4.0 আপনি ব্যবহার করছি

$("select").select2({
  dropdownAutoWidth: true
});

এই অন্যরা কাজ করে নি:

• ড্রপডাউনসিএসক্লাস: 'বিগড্রপ'
• প্রস্থ: '100%'
• প্রস্থ: 'সমাধান'

Answer 6

আপনার স্ক্রিপ্টে এভাবে মেথড কন্টেইনার সিএসএস যুক্ত করুন:

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

এটি আপনার নির্বাচনের প্রস্থটি আপনার ডিভের প্রস্থের মতোই সেট করবে।

Comments

এটি আমার জন্য কৌশলটি করেছে (বুটস্ট্র্যাপ 3 এর সাথে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করতে আমি সিলেক্ট 2 পেতে পারি না)। যদিও আমাকে বলতে হবে এটি কিছুটা হ্যাকি।

— এমকতাজা

এটি আমাকে ডান ট্র্যাকে সেট করেছে, আমি মিনিট প্রস্থের সাথে প্রদর্শনটি প্রতিস্থাপন করেছি:$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );

— নাবিল কাদিমি

Answer 7

'সমাধান' এ প্রস্থটি সেট করা আমার পক্ষে কার্যকর হয়নি। পরিবর্তে, আমি আমার নির্বাচনের "প্রস্থ: 100%" যুক্ত করেছি এবং এর মতো CSS সংশোধন করেছি:

.select2-offscreen {position: fixed !important;}

এটি ছিল আমার জন্য একমাত্র সমাধান (আমার সংস্করণটি ২.২.১) আপনার নির্বাচনটি সমস্ত উপলব্ধ স্থান গ্রহণ করবে, এটি ব্যবহার করার চেয়ে ভাল

class="input-medium"

বুটস্ট্র্যাপ থেকে, কারণ উইন্ডোটি আকার দেওয়ার পরেও নির্বাচনটি সর্বদা পাত্রে থাকে (প্রতিক্রিয়াশীল)

Comments

সমাধানের জন্য ধন্যবাদ তবে এটি কেবল আমার প্রথম ভারে কাজ করেছিল। একবার আমি একটি ট্যাগ নির্বাচন করেছি এবং তারপরে অন্য পৃষ্ঠার উপাদানটিতে ক্লিক করলে সিলেক্ট 2 ইনপুটটি ভুল আকারে ফিরে গেল

— মার্কার

Answer 8

আপনার সিলেক্ট 2 ফাংশনে প্রস্থের সমাধানের বিকল্পটি যুক্ত করুন

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

সিএসএসের নীচে আপনার স্টাইলশিটে যুক্ত করার পরে

.select2-container {
width: 100% !important;
}

এটি ইস্যুটি বাছাই করবে

Answer 9

আপনি এই মত চেষ্টা করতে পারেন। এটা আমার জন্য কাজ করে

$("#MISSION_ID").select2();

হাইড / শো বা এজাক্স অনুরোধে, আমাদের সিলেক্ট 2 প্লাগইনটি পুনরায় নতুন করতে হবে

উদাহরণ স্বরূপ:

$("#offialNumberArea").show();
$("#eventNameArea").hide();

$('.selectCriteria').change(function(){
    var thisVal = $(this).val();
    if(thisVal == 'sailor'){
        $("#offialNumberArea").show();
        $("#eventNameArea").hide();
    }
    else
    {
        $("#offialNumberArea").hide();
        $("#eventNameArea").show();
        $("#MISSION_ID").select2();
    }
});

Answer 10

সিলেক্ট 2 থেকে সহজ সিএসএস সমাধান

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />

//CSS
.input-xxsm {
  width: 40px!important; //for 2 digits 
}

.input-xsm {
  width: 60px!important; //for 4 digits 
}

.input-sm {
  width: 100px!important; //for short options   
}

.input-md {
  width: 160px!important; //for medium long options 
}

.input-lg {
  width: 220px!important; //for long options    
}

.input-xlg {
  width: 300px!important; //for very long options   
}

.input-xxlg {
  width: 100%!important; //100% of parent   
}

Answer 11

বুটস্ট্র্যাপ 4 ব্যবহার করে নির্মিত একটি সাম্প্রতিক প্রকল্পে আমি উপরের সমস্ত পদ্ধতি ব্যবহার করে দেখেছি তবে কিছুই কার্যকর হয়নি। আমার পদ্ধতিটি ছিল টেবিলের 100% পেতে jQuery ব্যবহার করে লাইব্রেরি সিএসএস সম্পাদনা করে ।

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.select2-w-100').parent().find('span')
    .removeClass('select2-container')
    .css("width", "100%")
    .css("flex-grow", "1")
    .css("box-sizing", "border-box")
    .css("display", "inline-block")
    .css("margin", "0")
    .css("position", "relative")
    .css("vertical-align", "middle")

ওয়ার্কিং ডেমো

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>