আইপিতে ড্রপডাউনলিস্ট প্রস্থ

Question 1

আই-তে, ড্রপডাউন-তালিকাটি ড্রপবক্সের মতো একই প্রস্থ নেয় (আমি আশা করি আমি বোধ করছি) তবে ফায়ারফক্সে ড্রপডাউন-তালিকার প্রস্থ সামগ্রী অনুসারে পরিবর্তিত হয়।

এটির মূলত এর অর্থ হ'ল আমাকে নিশ্চিত করতে হবে যে ড্রপবক্সটি দীর্ঘতম নির্বাচন প্রদর্শিত সম্ভব পর্যাপ্ত প্রশস্ত। এটি আমার পৃষ্ঠাটিকে খুব কুৎসিত দেখায় :(

এই সমস্যার জন্য কি কোনও সমাধান আছে? ড্রপবক্স এবং ড্রপডাউনলিস্টের জন্য বিভিন্ন প্রস্থকে সেট করতে আমি কীভাবে CSS ব্যবহার করতে পারি?

Question 2

এখানে আরও একটি jQuery ভিত্তিক উদাহরণ। এখানে পোস্ট করা অন্য সমস্ত উত্তরগুলির বিপরীতে, এটি সমস্ত কীবোর্ড এবং মাউস ইভেন্টগুলিকে বিবেচনা করে বিশেষত ক্লিকগুলি:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

সিএসএসের এই টুকরোটির সাথে এটি মিশ্রণে ব্যবহার করুন:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

আপনাকে যা করতে হবে তা হ'ল wideপ্রশ্নযুক্ত ড্রপডাউন উপাদানগুলিতে ক্লাস যুক্ত করা।

<select class="wide">
    ...
</select>

এখানে একটি jsfiddle উদাহরণ । আশাকরি এটা সাহায্য করবে.

Question 3

নিজের ড্রপ ডাউন তালিকা তৈরি করা যতটা ব্যয় হয় তার চেয়ে বেশি। আই আই ড্রপ ডাউন কাজের জন্য আপনি কিছু জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

এটি কিছুটা YUI গ্রন্থাগার এবং আই সিলেক্ট বাক্সগুলি ঠিক করার জন্য একটি বিশেষ এক্সটেনশন ব্যবহার করে।

আপনাকে নিম্নলিখিতটি অন্তর্ভুক্ত করতে হবে এবং আপনার <select>উপাদানগুলিকে একটিতে আবদ্ধ করতে হবে<span class="select-box">

আপনার পৃষ্ঠার বডি ট্যাগের আগে এগুলি রাখুন:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

পোস্ট গ্রহণযোগ্যতা সম্পাদনা:

আপনি YUI গ্রন্থাগার এবং হ্যাক নিয়ন্ত্রণ ছাড়াই এটি করতে পারেন। আপনাকে যা করতে হবে তা হল নির্বাচিত উপাদানটিতে একটি onmouseover = "this.style.width = 'Auto'" onmouseout = "this.style.width = '100px'" (বা আপনি যা চান) স্থাপন করতে হবে। YUI নিয়ন্ত্রণ এটিকে দুর্দান্ত অ্যানিমেশন দেয় তবে এটি প্রয়োজনীয় নয়। Jquery এবং অন্যান্য গ্রন্থাগারগুলি দিয়েও এই কাজটি সম্পন্ন করা যেতে পারে (যদিও, আমি এর জন্য স্পষ্টভাবে ডকুমেন্টেশন পাইনি)

- সম্পাদনায় সংশোধন:
নির্বাচন নিয়ন্ত্রণের জন্য অন-মাউসআউটে আইইয়ের একটি সমস্যা রয়েছে (এটি নির্বাচনের ক্ষেত্রে মাউসওভার হিসাবে বিকল্পগুলির উপর মাউসওভার বিবেচনা করে না)। এটি মাউসআউটটি ব্যবহার করা খুব জটিল করে তোলে। প্রথম সমাধানটি আমি এখনও অবধি খুঁজে পেয়েছি।

Question 4

আপনি কেবল নিম্নলিখিত চেষ্টা করতে পারেন ...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

আমি চেষ্টা করেছি এবং এটি আমার পক্ষে কাজ করে। অন্য কিছু প্রয়োজন হয় না।

Question 5

আমি নিম্নলিখিত সমাধানটি ব্যবহার করেছি এবং এটি বেশিরভাগ পরিস্থিতিতে ভাল কাজ করে বলে মনে হচ্ছে।

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

নোট: $ .browser.msie jQuery প্রয়োজন নেই।

Question 6

@ থ্যাড আপনার পাশাপাশি একটি অস্পষ্ট ইভেন্ট হ্যান্ডলার যুক্ত করতে হবে

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

তবে এটি কেবলমাত্র উপাদানগুলির পরিবর্তে ক্লিকের নির্বাচনবক্সকে প্রসারিত করবে। (এবং এটি আই 6 এ ব্যর্থ হয়েছে বলে মনে হয় তবে ক্রোম এবং আই 7 এ পুরোপুরি কাজ করে)

Question 7

আইই 6 / আইই 7 / আইই 8 তে এটি করার কোনও উপায় নেই। নিয়ন্ত্রণ অ্যাপ্লিকেশন দ্বারা আঁকা এবং IE কেবল যেভাবে আঁকেন না। আপনার সেরা বাজি হ'ল সাধারণ এইচটিএমএল / সিএসএস / জাভাস্ক্রিপ্টের মাধ্যমে আপনার নিজের ড্রপ-ডাউন বাস্তবায়ন করা যদি ড্রপ-ডাউন এক প্রস্থ এবং তালিকার অন্য প্রস্থের তালিকা রাখা গুরুত্বপূর্ণ।

Question 8

আপনি যদি jQuery ব্যবহার করেন তবে এই IE নির্বাচন করে প্রস্থ প্লাগইনটি ব্যবহার করে দেখুন:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

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

Question 9

JQuery এ এটি মোটামুটি ভাল কাজ করে। ধরুন ড্রপডাউনতে আইডি = "ড্রপডাউন" রয়েছে।

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});

Question 10

এখানে সহজ সমাধান।

আমি শুরু করার আগে, আপনাকে অবশ্যই ড্রপডাউন নির্বাচন বাক্সটি আই 6 বাদে প্রায় সমস্ত ব্রাউজারে স্বয়ংক্রিয়ভাবে প্রসারিত হবে tell সুতরাং, আমি একটি ব্রাউজার চেক করব (অর্থাত্, আই that) এবং কেবলমাত্র সেই ব্রাউজারটিতে নিম্নলিখিতগুলি লিখব। এখানে এটা যায়. প্রথমে ব্রাউজারটি পরীক্ষা করুন।

কোডটি যাদুতে ড্রপডাউন নির্বাচন বাক্সটিকে প্রসারিত করবে। সমাধানের একমাত্র সমস্যাটি হ'ল ড্রপডাউনটি 420px এ প্রসারিত হবে এবং ওভারফ্লো = গোপনের কারণে আমরা বর্ধিত ড্রপডাউন আকারটি আড়াল করছি এবং এটি 170px হিসাবে দেখছি; সুতরাং, ddl এর ডানদিকে তীরটি লুকানো থাকবে এবং দেখা যাবে না। তবে নির্বাচন বাক্সটি 420px এ প্রসারিত হবে; যা আমরা সত্যই চাই কেবল নিজের জন্য নীচের কোডটি ব্যবহার করে দেখুন এবং পছন্দ হলে এটি ব্যবহার করুন।

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

উপরেরটি আই 6 সিএসএস। অন্যান্য সমস্ত ব্রাউজারগুলির জন্য সাধারণ সিএসএস নীচের মতো হওয়া উচিত।

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}

Question 11

আপনি যদি কোনও সরল ড্রপডাউন এবং / অথবা ফ্লাইআউট মেনু চান তবে কোনও সংক্রামিত প্রভাব নেই কেবল সিএসএস ব্যবহার করুন ... আপনি আই 6 কে সমর্থন করতে বাধ্য করতে পারেন: আচরণের (। আই 6 শুধুমাত্র সম্পত্তি) এর সাহায্যে একটি htc ফাইল (সিএসএস 3 হোভার?) ব্যবহার করে সমস্ত উপাদান নিয়ে যেতে পারেন in শর্তসাপেক্ষে সংযুক্ত সিএসএস ফাইল।

Question 12

এটি পরীক্ষা করে দেখুন .. এটি নিখুঁত নয় তবে এটি কাজ করে এবং এটি কেবল আইইয়ের জন্য এবং এফএফকে প্রভাবিত করে না। আমি অনিমাউডসাউনের জন্য নিয়মিত জাভাস্ক্রিপ্টটি শুধুমাত্র আইই স্থির করে তুলতে ব্যবহার করেছি .. তবে জিকুরি থেকে আসা এমএসি অনময়েডাউনটিতেও ব্যবহার করা যেতে পারে .. মূল ধারণাটি "চালু" এবং অস্পষ্টভাবে নির্বাচিত বাক্সটিকে স্বাভাবিক অবস্থায় ফিরিয়ে আনার জন্য .. ... আপনার নিজের প্রস্থের সিদ্ধান্ত নিন। আমার দরকার 35%।

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"

Question 13

বালাসসির উত্তর উপরের কাজটি দুর্দান্ত কাজ করে, তবে আপনার ড্রপডাউনটির বিষয়বস্তুটি আপনি যদি আপনার সিএসএস সিলেক্ট করুন। এক্সপ্যান্ডে সংজ্ঞায়িত করেন তার চেয়ে কম প্রস্থ থাকে তবে আমি এটি যুক্ত করব: মাউসওভার বাইন্ডে এটি যুক্ত করুন:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})

Question 14

এটি এমন কিছু যা আমি অন্য ব্যক্তির জিনিস থেকে বিট নিয়েছি।

        $(document).ready(function () {
        if (document.all) {

            $('#<%=cboDisability.ClientID %>').mousedown(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboDisability.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboDisability.ClientID %>').change(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').mousedown(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboEthnicity.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').change(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
            });

        }
    });

যেখানে cboEthnicity এবং cboDisability হ'ল ড্রপডাউনগুলি বিকল্পের পাঠ্যগুলির প্রস্থের চেয়ে প্রশস্ত আকারের চেয়ে বৃহত্তর।

আপনি দেখতে পাচ্ছেন, আমি ডকুমেন্ট নির্দিষ্ট করে রেখেছি all সমস্ত এটি কেবল আইই তে কাজ করে। এছাড়াও, আমি ডিভ উপাদানগুলির মধ্যে ড্রপডাউনগুলি এ জাতীয়ভাবে আবদ্ধ করে রেখেছি:

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

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

আশা করি এটি কাউকে সাহায্য করবে।

Question 15

এটি করার সর্বোত্তম উপায়:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

এটি হুবহু BalusC সমাধান মত একই। কেবল এটিই সহজ। ;)

Question 16

একটি পূর্ণাঙ্গ jQuery প্লাগইন উপলব্ধ। এটি নন-ব্রেকিং লেআউট এবং কীবোর্ড ইন্টারঅ্যাকশনগুলিকে সমর্থন করে, ডেমো পৃষ্ঠাটি দেখুন: http://powerkiki.github.com/ie_expand_select_width/

অস্বীকৃতি: আমি সেই জিনিসটি কোড করেছিলাম, প্যাচগুলি স্বাগত

Question 17

http://developer.yahoo.com/yui/example/button/button-menu-select.html#

Question 18

Jquery BalusC এর সমাধানটি আমার দ্বারা উন্নত। এছাড়াও ব্যবহৃত: ব্র্যাড রবার্টসনের মন্তব্য এখানে ।

এটি কেবল একটি .js এ রাখুন, আপনার পছন্দসই কম্বোগুলির জন্য প্রশস্ত শ্রেণিটি ব্যবহার করুন এবং এটিকে কোনও আইডি দিতে ভুলবেন না। অনলোডে ফাংশনটি কল করুন (বা ডকুমেন্টরেডি বা যাই হোক না কেন)।
সাধারণ গাধা হিসাবে এটি :)
এটি কম্বো দৈর্ঘ্যের হিসাবে কম্বোর জন্য আপনি যে প্রস্থটি সংজ্ঞায়িত করেছেন তা ব্যবহার করবে।

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}

Question 19

আপনি নির্বাচিত উপাদানটিতে সরাসরি একটি শৈলী যুক্ত করতে পারেন:

<select name="foo" style="width: 200px">

সুতরাং এই নির্বাচন করা আইটেমটি 200 পিক্সেল প্রশস্ত হবে।

বিকল্পভাবে আপনি উপাদানটিতে কোনও শ্রেণি বা আইডি প্রয়োগ করতে পারেন এবং স্টাইলশিটে উল্লেখ করতে পারেন

Question 20

এখনও পর্যন্ত একটিও নেই। আইই 8 সম্পর্কে জানেন না তবে আপনি জাভাস্ক্রিপ্টের সাথে নিজের ড্রপডাউন তালিকার কার্যকারিতা বাস্তবায়ন না করে আইই 6 এবং আই 7 তে এটি করা যাবে না। ওয়েবে এটি কীভাবে করা যায় তার উদাহরণ রয়েছে, যদিও বিদ্যমান কার্যকারিতাটি সদৃশ করার ক্ষেত্রে আমি খুব বেশি সুবিধা দেখছি না।

Question 21

আমাদের একটি একই জায়গায় রয়েছে: ড্রপডাউনলিস্ট:

ফায়ারফক্সে (3.0.০.৫) ড্রপডাউনটি ড্রপডাউনটির দীর্ঘতম আইটেমের প্রস্থ, যা p০০ পিক্সেল প্রশস্ত বা এর মতো কিছু।

Question 22

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

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});

Question 23

প্রথম সেরা উত্তরের হিজারউও লিঙ্কটি (ওয়াইউআই অ্যানিমেশন ওয়ার্ক-এয়ার) ভেঙে গেছে, আমার ধারণা ডোমেনটির মেয়াদ শেষ হয়ে গেছে। কোডটি মেয়াদ শেষ হওয়ার আগেই আমি অনুলিপি করেছি, সুতরাং আপনি এটি এখানে খুঁজে পেতে পারেন (কোডের মালিক আমাকে আবার আপলোড করে কোনও কপিরাইট লঙ্ঘন করছে কিনা তা জানতে দিতে পারেন)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-roddown-avoid-width-problem/

একই ব্লগ পোস্টে আমি YUI বাটন মেনু ব্যবহার করে সাধারণের মতো একটি নির্দিষ্ট একই নির্বাচন উপাদান তৈরির বিষয়ে লিখেছিলাম। একবার দেখুন এবং আমাকে যদি তা সাহায্য করে তা জানান!

Question 24

সাই পোস্ট করা সমাধানের ভিত্তিতে , jQuery দিয়ে এটি কীভাবে করবেন।

$(document).ready(function() {
    if ($.browser.msie) $('select.wide')
        .bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
        .bind('blur', function() { $(this).css({position:'static',width:''}); });
});

Question 25

আমি ভেবেছিলাম আমার টুপিটি রিংয়ে ফেলে দেব। আমি একটি সাএস অ্যাপ্লিকেশন তৈরি করি এবং আমার একটি টেবিলের ভিতরে এমবেডেড একটি সিলেক্ট মেনু ছিল। এই পদ্ধতিটি কাজ করেছিল, তবে এটি টেবিলে থাকা সমস্ত কিছুকে সরিয়ে দিয়েছে।

onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"

সুতরাং আমি এগুলি আরও ভাল করার জন্য যা করেছি তা হল একটি জেড-ইনডেক্সড ডিভের ভিতরে নির্বাচনটি ফেলে দেওয়া।

<td valign="top" style="width:225px; overflow:hidden;">
    <div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
        <select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
            <option value="0">All</option>
            <!--More Options-->
        </select>
    </div>
</td>

Question 26

আমাকে এই সমস্যাটি নিয়ে কাজ করতে হয়েছিল এবং একবার আইআই 6, 7 এবং 8 (এবং স্পষ্টতই অন্যান্য ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ) এর জন্য কাজ করার জন্য একটি দুর্দান্ত এবং পরিমাপযোগ্য সমাধান নিয়ে এসেছি। আমি এখানে এ সম্পর্কে একটি সম্পূর্ণ নিবন্ধ লিখেছি: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

ভেবেছি যে আমি এখনও এই সমস্যার মধ্যে রয়েছে এমন লোকদের জন্য এটি ভাগ করব, কারণ উপরোক্ত সমাধানগুলির কোনওটিই প্রতিটি ক্ষেত্রে কার্যকর হয় না (আমার মতে)।

Question 27

আমি এই সমাধানগুলির সমস্ত চেষ্টা করেছিলাম এবং কেউই আমার পক্ষে সম্পূর্ণরূপে কাজ করেনি। এটিই আমি নিয়ে এসেছি

$(document).ready(function () {

var clicknum = 0;

$('.dropdown').click(
        function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                $(this).css('position', '');
                $(this).css('width', '');
            }
        }).blur(
        function() {
            $(this).css('position', '');
            $(this).css('width', '');
            clicknum = 0;
        }).focus(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        }).mousedown(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        });
})(jQuery);

আপনার এইচটিএমএলের প্রতিটি ড্রপডাউনতে একটি ড্রপডাউন ক্লাস যুক্ত করার বিষয়ে নিশ্চিত হন

ট্রিকটি এখানে বিশেষায়িত ক্লিক ফাংশনটি ব্যবহার করছে (আমি এটি এখানে পেয়েছি প্রতিবার একটি ড্রপডাউনলিস্ট আইটেমটি jQuery এর সাথে নির্বাচিত হলে ফায়ার ইভেন্ট )। এখানে অন্যান্য সমাধানগুলির মধ্যে অনেকগুলি ইভেন্ট হ্যান্ডলার পরিবর্তন ব্যবহার করে, যা ভালভাবে কাজ করে তবে ব্যবহারকারী যদি পূর্বনির্ধারিত একই বিকল্পটি পছন্দ করে তবে ট্রিগার করবে না।

অন্যান্য অনেকগুলি সমাধানের মতো, ফোকাস এবং মোডসাউনটি যখন ব্যবহারকারীরা ড্রপডাউনটিকে ফোকাসে রাখে, তখন তারা যখন ক্লিক করবে তখন অস্পষ্টতা bl

আপনি এটিতে কোনও ধরণের ব্রাউজার সনাক্তকরণ আটকে রাখতে চাইতে পারেন যাতে এটি কেবলমাত্র প্রভাব ফেলে। যদিও এটি অন্য ব্রাউজারগুলিতে খারাপ লাগে না

Question 28

এটি IE, ক্রোম, এফএফ এবং সাফারি এর সমস্ত সংস্করণে পরীক্ষিত

জাভাস্ক্রিপ্ট কোড:

<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}

function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->

এইচটিএমএল কোড:

<select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
  <option value="0" selected="selected" readonly="readonly">Select</option>
  <option value="1" >Apple</option>
  <option value="2" >Orange + Banana + Grapes</option>