مشكلة القائمة المنسدلة

Question

أواجه مشكلة حيث تتصرف القائمة المنسدلة في IE 6/7 على هذا النحو:

يمكنك أن ترى أن عرض القائمة المنسدلة ليس عريضًا بما يكفي لعرض النص بالكامل دون توسيع القائمة المنسدلة الشاملة.

لكن في Firefox، لا توجد مشكلة لأنه يوسع العرض وفقًا لذلك.هذا هو السلوك الذي نريده في IE 6/7:

لقد بحثنا في طرق مختلفة لاستخدام أحداث onfocus وonblur وonchange ولوحة المفاتيح والماوس لمحاولة حل المشكلة ولكن لا تزال هناك بعض المشكلات.

كنت أتساءل عما إذا كان أي شخص قد حل هذه المشكلة في IE 6/7 دون استخدام أي مجموعات أدوات/أطر عمل (YUI، Ext-JS، jQuery، إلخ ...).

Answer 1

هذا الشخص كان لديه نفس المشكلة مثلك وتوصل إلى حل.إنه نوع من الاختراق ويعتمد على كيفية إعداد واجهة المستخدم الخاصة بك، ولكنه خيار.اتمني ان يكون مفيدا.

يحرر

الرابط الذي بدأت البحث عنه كان في الواقع هذا, ، وهو نفس ما اقترحه تيم.أعتقد أنه حل أفضل من اكتشافي الأصلي. التعديل الثاني يعتمد هذا الحل في الواقع على إطار عمل YUI، لكنني لا أتخيل أن تكرار الفكرة الرئيسية وراءه أمر صعب للغاية.بخلاف ذلك، الرابط الأول جيد أيضًا، وأبسط بكثير.

حظ سعيد.

Answer 2

وليت شيئا من هذا القبيل أن تكون قابلة للتنفيذ في وضعك؟

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width /demo.php

والعرض من القائمة المنسدلة ينمو / يتقلص خلال تمرير الماوس.

Answer 3

<script type="text/javascript">
    var MAX_WIDTH = 500; //the biggest width the select is allowed to be

    function biggestOption(elem) {
        var biggest = 0;
        for (var i=0;i<elem.options.length;i++) {
            if ( elem.options[i].innerHTML.length > biggest ) {
                biggest = elem.options[i].innerHTML.length;
            }
        }
        return roughPixelSize(biggest);
    }

    function roughPixelSize(charLength) {
        //this is far from perfect charLength to pixel
        //but it works for proof of concept
        roughSize =  30 + (charLength * 6);
        if (roughSize > MAX_WIDTH) {
            return MAX_WIDTH;
        } else {
            return roughSize;
        }
    }

    function resizeToBiggest(elem) {
        elem.style.width = biggestOption(elem);
    }

    function resizeToSelected(elem) {
        elem.style.width = roughPixelSize(elem.options[elem.selectedIndex].innerHTML.length);
    }

</script>

<select onmouseover="resizeToBiggest(this)" style="width:70px" onchange="resizeToSelected(this)" onblur="resizeToSelected(this)" >
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
    <option>this is some really really realy long text</option>
    <option>test 4</option>
    <option>test 5</option>
</select>

وأنا لا أعتقد أن ما تريد القيام به هو ممكن من دون الكثير من العمل أو استخدام الإطار. سبق هو شيء بالنسبة لك أن تنظر تحاول / العبث مع ...

Answer 4

وأوصي جعل حدد نطاق أوسع. فايرفوكس هو دية حيال ذلك، ويوسع عرض الخيار بحيث يمكنك ان ترى قيمته، ولكن هذا لا يحل المشكلة التي بمجرد تحديد خيار، فإنك لن تكون قادرا على رؤية بالضبط ما الذي حددته كما المستخدم إلا إذا جعل حدد نطاق أوسع. لذلك من وجهة نظر سهولة الاستخدام، وأنصح مجرد السماح للمتصفح لتحديد حجم بناء على محتوياته، أو لضبط العرض التي هي واسعة بما يكفي لقيمة محتويات أوسع الخيار ل.

Answer 5

والمشكلة، ونحن لا نريد ذلك لتغيير تلقائيا، دعونا عزل المشكلة لهذه المشكلة بالتحديد. في حين أوافق على أن من وجهة نظر الاستخدام أنها ليست مثالية، وأنا لا تزال ترغب في حل هذه المشكلة.

لدينا عرض ثابت المنسدلة القائمة، ونحن نريد أن يكون ذلك التصرف كما في فايرفوكس 7 كما هو معروض أعلاه.

Answer 6

وأعتقد أنه إذا ترك العرض فارغة على جهاز التحكم سوف تغيير على البيانات في عنصر التحكم.

[تحرير] نعم، واختبارها في التطبيق VS2005 على شبكة الإنترنت. إضافة عنصر تحكم ووضع العناصر فيها وتعديلها لأطول البند في أي 7.0 عندما نص على العرض لم يعد فعل ذلك.

[تحرير 2] المسألة الوحيدة هي أن النص من القائمة المنسدلة يعدل أيضا. وهذا قد تخلص من واجهة المستخدم الخاص بك. ولذلك فإن هذا قد لا يكون الحل الذي تبحث عنه.

[تحرير 3] وهو بالتأكيد بطريقة مختلفة ما يقدمونه. أعتقد أن الطريقة الوحيدة التي يمكن أن تغلب على ذلك هو خلق السيطرة الخاصة على غرار ما اقترح <لأ href = "http://forums.asp.net/p/1145442/1861195.aspx#1861195" يختلط = "نوفولو noreferrer "> هنا

Answer 7

وأنا جربت هذا على IE7 وتوسعها وفقا لذلك. هل أنت متأكد من أنك لا تستخدم نوعا من غريب CSS الذي يفرض أن يكون بهذا الحجم فقط في IE 6/7؟ (فمن الممكن أن تستهدف متصفحات معينة باستخدام غريبة الخارقة CSS محدد مثل '* أتش تي أم أل')

Answer 8

وفي الأساس، إذا كنت حقا بحاجة إلى النص الفعلي، وسوف تحتاج إلى اختيار واحد أو الآخر (تحديد أم لا تحديد العرض). هذا هو مثال كلاسيكي من صعوبات في الترميز لجميع المتصفحات المعروفة المستخدمة، وهناك حقا أي وسيلة من حوله حتى تأتي الشركات معا، وتقول "هذه هي الطريقة التي ستكون. FOREVER".

وكبديل لذلك، يمكن استخدام حل نابعة من الداخل كما هو مذكور في الرد آخر. في الحالة الخاصة بك، وأود أن أوصي به.

Answer 9

وكيف حالك ملء دروبدوونليست. أنا باستخدام التعليمات البرمجية التالية لملء دروبدوونليست وضبط العرض وفقا لأكبر النص المعروض:

private void BindData()
        {
            List<Foo> list = new List<Foo>();
            list.Add(new Foo("Hello"));
            list.Add(new Foo("bye bye"));
            list.Add(new Foo("this is a reall asd a s das d asd as da sf gfa sda sd asdasd a"));

            ddl1.DataSource = list;
            ddl1.DataTextField = "Text"; 
            ddl1.DataBind(); 
        }

وأوه نعم لا تحدد صراحة العرض على دروبدوونليست.