css - उपयोगकर्ता एक विकल्प का चयन करना चाहता है के बाद 'चयन' विकल्प चौड़ाई का विस्तार कैसे करें




html-select content-length (7)

हो सकता है कि यह एक आसान सवाल है, शायद नहीं। मेरे पास एक चयन बॉक्स है जहां मैं चौड़ाई के साथ हार्डकोड 120px कहें

<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

मैं दूसरा विकल्प दिखाने में सक्षम होना चाहता हूं ताकि उपयोगकर्ता पाठ की पूरी लंबाई देख सकें।

बाकी सब की तरह यह फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन इंटरनेट एक्सप्लोरर 6 के साथ काम नहीं करता है।


ठीक है, यह विकल्प बहुत हंसी है लेकिन काम करना चाहिए।

$(document).ready( function() {
$('#select').change( function() {
    $('#hiddenDiv').html( $('#select').val() );
    $('#select').width( $('#hiddenDiv').width() );
 }
 }

कौन सा प्रक्षेपण एक छिपी हुई div की आवश्यकता होगी

<div id="hiddenDiv" style="visibility:hidden"></div>

ओह और आपको jQuery की आवश्यकता होगी


मैंने निम्नलिखित समस्या के साथ मेरी समस्या तय की:

<div style="width: 180px; overflow: hidden;">
<select style="width: auto;" name="abc" id="10">
<option value="-1">Any</option>
<option value="123">123</option>
</select>
</div>

आशा करता हूँ की ये काम करेगा!

चीयर्स, साइचन


एक सरल समाधान जो मैं आईई में किसी मौजूदा साइट के लिए इस्तेमाल किया (jQuery का उपयोग कर रहा हूं, लेकिन अगर आप वास्तव में जेएस को अच्छी तरह से नहीं जानते हैं तो मैं eventListener कोड के साथ वापस पोस्ट कर सकता हूं) निम्न है:

if (jQuery.browser.msie) {
  jQuery('#mySelect').focus(function() {
    jQuery(this).width('auto');
  }).bind('blur change', function() {
    jQuery(this).width('100%');
  });
};

बेशक, पिछली चौड़ाई को स्टोर करने के लिए एक चर ( var cWidth = jQuery('#mySelect').width(); ) का उपयोग करें, लेकिन यह हमारे सभी काम करने के लिए आवश्यक था जैसा कि आप उम्मीद करते हैं।


यह आपके अधिकांश व्यवहार की नकल करता है:

  <!--

     I found this works fairly well.

  -->

  <!-- On page load, be sure that something else has focus. -->
  <body onload="document.getElementById('name').focus();">
  <input id=name type=text>

  <!-- This div is for demonstration only.  The parent container may be anything -->
  <div style="height:50; width:100px; border:1px solid red;">

  <!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
  <select
   style="width:96px; position:absolute; z-index:+1;"
   onactivate="this.style.width='auto';"
   onchange="this.blur();"
   onblur="this.style.width='96px';">
  <!-- "activate" happens before all else and "width='auto'" expands per content -->
  <!-- Both making a selection and moving to another control should return static width -->

  <option>abc</option>
  <option>abcdefghij</option>
  <option>abcdefghijklmnop</option>
  <option>abcdefghijklmnopqrstuvwxyz</option>

  </select>

  </div>

  </body>

  </html>

यह कुछ कुंजी-प्रेस व्यवहार को ओवरराइड करेगा


नमूना

function PopulateDropdown() {
    $.ajax({
        type: "POST",
        url: "../CommonWebService.asmx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $("select[id^='MyDropDown']").empty();
            $.each(msg.d, function () {
                $("select[id^='MyDropDownSelect']").append($("<option></option>").val(this['IdIndexDataType']).html(this['DataTypeName']));
            }); 
            $("select[id^='MyDropDown']").css("width", "auto");  
        },
        error: function (e1) {
            alert("Error - " + e1.toString());
        }
    });
}

ड्रॉपडाउन के लिए डेटा डालने के बाद यह कोड इस कोड को जोड़कर नीचे दिए गए कोड की समस्या को हल करेगा।

$("select[id^='MyDropDown']").css("width", "auto");

मैंने इसे अपने बूटस्ट्रैप पृष्ठ में न्यूनतम चौड़ाई और अधिकतम-चौड़ाई को चुनने में एक ही मान के साथ तय किया और फिर चयन का चयन किया: ऑटो पर फोकस

select {
  min-width: 120px;
  max-width: 120px;
}
select:focus {
  width: auto;
}
<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>


आप कोशिश कर सकते हैं और सीएसएस का उपयोग केवल हल कर सकते हैं चयन करने के लिए वर्ग जोड़कर

select{ width:80px;text-overflow:'...';-ms-text-overflow:ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}

किसी विशेष आइटम (विकल्प) HTML में अधिक संदर्भ सूची बॉक्स शैली के लिए

बहु चयन सूची बॉक्स







content-length