HTML चयन बॉक्स की ऊँचाई (ड्रॉपडाउन)

Question 1

क्या कोई यह पुष्टि कर सकता है कि किसी ड्रॉपडाउन की ऊंचाई को बदलना संभव नहीं है, जब आप किसी चुनिंदा बॉक्स पर क्लिक करते हैं।

चयन का आकार गुण इसे सूची की तरह बनाता है, सीएसएस में ऊंचाई विशेषता या तो बहुत अच्छा करती है।

Question 2

की पुष्टि।

जो हिस्सा नीचे गिरता है वह या तो सेट हो जाता है:

सभी प्रविष्टियों को दिखाने के लिए आवश्यक ऊँचाई, या
xप्रविष्टियाँ दिखाने के लिए ऊँचाई (शेष देखने के लिए स्क्रॉलबार के साथ), जहाँ xहै
- फ़ायरफ़ॉक्स और क्रोम में 20
- आईई 6, 7, 8 में 30
- ओपेरा 10 के लिए 16
- ओपेरा 11 के लिए 14
- सफारी 4 के लिए 22
- सफारी 5 के लिए 18
- आईई 5.0, 5.5 में 11
आईई / एज में, अगर कोई विकल्प नहीं है, तो 11 ब्लैंक प्रविष्टियों की एक मूर्खतापूर्ण उच्च सूची।

ऊपर (3) के लिए आप इस JSFiddle में परिणाम देख सकते हैं

Question 3

मैं इस समस्या से निपटने के लिए एक ड्रॉपडाउन प्रतिस्थापन jquery प्लगइन पर काम कर रहा हूँ। इस पद के रूप में, यह देखने और कार्यक्षमता के मामले में एक देशी गिरावट से लगभग अप्रभेद्य है ।

यहाँ एक डेमो (डाउनलोड करने के लिए एक लिंक भी है): http://programmingdrunk.com/current-projects/dropdownReplacement/

यहाँ प्लगइन का परियोजना पृष्ठ है:

~~http://plugins.jquery.com/project/dropdownreplacement~~

(अद्यतन :) jquery प्लगइन पेज अब काम नहीं करता है। मैं शायद अपनी नई साइट पर अपना प्लगइन नहीं डालूँगा जब वे इसे काम कर रहे हैं, तो डेमो / डाउनलोड के लिए programmingdrunk.com लिंक का उपयोग करने के लिए स्वतंत्र महसूस करें

Question 4

नहीं । किसी चुनिंदा ड्रॉपडाउन की ऊंचाई बदलना संभव नहीं है क्योंकि यह संपत्ति ब्राउज़र विशिष्ट है।

हालांकि अगर आप उस कार्यक्षमता को चाहते हैं, तो कई विकल्प हैं। आप बूटस्ट्रैप का उपयोग कर सकते हैं dropdown-menuऔर इसे max-heightसंपत्ति के रूप में परिभाषित कर सकते हैं। कुछ इस तरह।

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

स्निपेट का विस्तार करें

Question 5

वास्तव में आप कर सकते हैं! जावास्क्रिप्ट के साथ परेशानी मत करो ... मैं बस एक वेबसाइट के लिए एक ही चीज़ पर बना रहा हूं जो मैं बना रहा हूं और यदि आप टैग के लिए सीएसएस में 'फ़ॉन्ट-आकार' विशेषता को बढ़ाते हैं तो यह स्वचालित रूप से ऊंचाई भी बढ़ाता है। पेटीएम लेकिन यह कुछ ऐसा है जो मुझे बहुत परेशान करता है

Question 6

यह एक सही समाधान नहीं है, लेकिन यह काम करता है।

चयनित टैग में, निम्नलिखित विशेषताओं को शामिल करें जहां 'n' ड्रॉपडाउन पंक्तियों की संख्या है जो दिखाई देगी।

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

इस समाधान के साथ तीन समस्याएं हैं। 1) पहले माउस क्लिक के दौरान दिखाए गए सभी तत्वों का एक त्वरित फ्लैश है। 2) स्थिति 'निरपेक्ष' 3 पर सेट है) भले ही 'एन' आइटम से कम हो, ड्रॉपडाउन बॉक्स अभी भी 'एन' आइटम के आकार के लिए होगा।

Question 7

ची पंक्ति जवाब समस्या के लिए एक अच्छा विकल्प है, लेकिन मैं मैं एक त्रुटि पाया है onclickबहस। इसके बजाय, यह होगा:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(और उल्लेख करें कि आपको " n " को उन पंक्तियों की संख्या से बदलना होगा जिनकी आपको आवश्यकता है)

Question 8

आप एक की ऊंचाई बदल सकते हैं। उपयोग न करें height="500"(बस एक उदाहरण संख्या)। शैली का उपयोग करें। आप <style>टैग का उपयोग कर सकते हैं या बस इसका उपयोग कर सकते हैं :

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

मैं बदलाव को देख रहा हूं:

  <select id="option" style="height: 100px;">

और इससे भी बेहतर ...

style="height: 100px;">

आपने देखा?

यदि यह मददगार है तो कृपया वोट करें!