JQuery यूआई संवाद को स्वचालित रूप से बढ़ने या अपनी सामग्री फिट करने के लिए सिकोड़ें

131

मेरे पास एक JQuery UI डायलॉग पॉपअप है जो एक फॉर्म प्रदर्शित करता है। प्रपत्र पर कुछ विकल्पों का चयन करके नए विकल्प फ़ॉर्म में दिखाई देंगे, जिससे यह लंबा हो जाएगा। यह एक परिदृश्य को जन्म दे सकता है जहां मुख्य पृष्ठ में एक स्क्रॉलबार है और JQuery यूआई संवाद में एक स्क्रॉलबार है। यह दो-स्क्रॉलबार परिदृश्य भद्दा और उपयोगकर्ता के लिए भ्रामक है।

मैं स्क्रॉल स्क्रॉल दिखाए बिना अपनी सामग्री को हमेशा फिट करने के लिए JQuery UI डायलॉग (और संभवतः हटना) कैसे बना सकता हूं? मैं पसंद करूंगा कि मुख्य पृष्ठ पर केवल एक स्क्रॉलबार दिखाई दे।

jquery jquery-ui jquery-ui-dialog

— Miken
स्रोत

1

मैं कोड का एक नमूना पोस्ट करने का सुझाव देता हूं, संवाद की संरचना को देखे बिना समाधान की सिफारिश करना मुश्किल है।

— डिएगो

139

अद्यतन: jQuery यूआई 1.8 के रूप में, काम कर रहे समाधान (दूसरी टिप्पणी में उल्लेख किया गया है) का उपयोग करना है:

width: 'auto'

AutoResize: सही विकल्प का उपयोग करें। मैं उदाहरण देता हूँ:

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   </script>

यहाँ एक काम कर उदाहरण है: http://jsbin.com/ubowa

— CGP
स्रोत

हम्म .. को मेरे फ्रेमडायॉग को विस्तारित करना होगा ... यह अनिवार्य रूप से एक ऐसी विधि है जो संवाद के साथ उपयोग के लिए एक iframed सामग्री बनाता है .. यह सही नहीं है, लेकिन एक परियोजना के लिए अच्छी तरह से काम करना जिसके लिए मुझे इसकी आवश्यकता थी।

— ट्रैकर

20

यह मेरे लिए काम नहीं किया। इसके बजाय, मैंने "ऑटो" के लिए विकल्प "चौड़ाई" सेट किया।

— सैम

+1 करने के लिए टिप्पणी - यह मेरे लिए काम करता है, और उदाहरण भी काम करता है, इसलिए मुझे यह कल्पना करना होगा कि यह नहीं बदला है, लेकिन हे, अगर बाकी सभी विफल हो जाते हैं, तो इसे एक शॉट दें।

— cgp

यह चौड़ाई के लिए काम नहीं करता है, यह केवल ऊंचाई के लिए काम करता है जो मुझे लगता है।

— वॉल्ट डब्ल्यू

18

यह उत्तर अब संस्करण 1.8.4 के लिए मान्य नहीं है, इसके बजाय ऊंचाई ऑटो फोरम का

— Jeff

48

इसका उत्तर सेट करना है

autoResize:true

प्रॉपर्टी डायलॉग बनाते समय। इसे काम करने के लिए आप संवाद के लिए कोई ऊंचाई निर्धारित नहीं कर सकते। इसलिए यदि आप इसके निर्माता विधि में या किसी भी शैली के माध्यम से पिक्सेल के लिए पिक्सेल में एक निश्चित ऊँचाई सेट करते हैं, तो स्वतः संपत्ति गुण काम नहीं करेगा।

— Miken
स्रोत

9

शानदार :) लेकिन jQuery ने उनके प्रलेखन में ऐसा क्यों नहीं किया! वैसे भी धन्यवाद

— वाहिद बिट्टर

सावधान, ट्रिगर प्लगइन (पर, मेरी, बंद आदि) द्वारा स्थिति के साथ काम नहीं करता है

— जेफज़

26

यह jQuery UI v1.10.3 के साथ काम करता है

$("selector").dialog({height:'auto', width:'auto'});

— IlludiumPu36
स्रोत

मेरे लिए भी काम किया (v1.11.1)।

— जे कमिंस

11

मैंने निम्नलिखित संपत्ति का उपयोग किया जो मेरे लिए ठीक काम करती है:

$('#selector').dialog({
     minHeight: 'auto'
});

— emolah
स्रोत

2

ऑटो को ऊंचाई का समर्थन किया जाता है।

चौड़ाई नहीं है!

किसी प्रकार का ऑटो करने के लिए आपके द्वारा दिखाए जा रहे डिव का आकार प्राप्त करें और फिर विंडो को सेट करें।

C # कोड में ..

TheDiv.Style["width"] = "200px";

    private void setWindowSize(int width, int height)
    {
        string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
        string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
            "scriptDOWINDOWSIZE",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    }

— द डेमज़
स्रोत

2

यदि आपको IE7 में काम करने की आवश्यकता है, तो आप अनिर्दिष्ट, छोटी गाड़ी और असमर्थित {'width':'auto'} विकल्प का उपयोग नहीं कर सकते । इसके बजाय, निम्नलिखित को अपने में जोड़ें .dialog():

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

चाहे .scrollWidthराइट-साइड पैडिंग शामिल हो, ब्राउज़र पर निर्भर करता है (फ़ायरफ़ॉक्स क्रोम से भिन्न होता है), इसलिए आप या तो एक व्यक्तिपरक "अच्छा पर्याप्त" पिक्सेल की संख्या जोड़ सकते हैं .scrollWidth, या इसे अपने स्वयं के चौड़ाई-गणना फ़ंक्शन के साथ बदल सकते हैं।

आप width: 0अपने .dialog()विकल्पों में शामिल करना चाहते हैं, क्योंकि यह विधि कभी भी चौड़ाई कम नहीं करेगी, केवल इसे बढ़ाएं।

IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 और ओपेरा 22 में काम करने का परीक्षण किया गया।

— व्लादिमीर कोर्निया
स्रोत

1

var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

संवाद की चौड़ाई के आकार के लिए मुझे इसकी आवश्यकता थी।

— user596393
स्रोत