Ajax द्वारा भरी गई सामग्री की चौड़ाई के लिए jQuery यूआई संवाद को स्वचालित रूप से आकार दें

134

मुझे इस पर विशिष्ट जानकारी और उदाहरण खोजने में बहुत परेशानी हो रही है। मुझे अपने एप्लिकेशन में कई jQuery यूआई संवाद मिले हैं जो .ajax () कॉल के साथ लोड किए गए divs से जुड़े हैं। वे सभी एक ही सेटअप कॉल का उपयोग करते हैं:

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

मैं सिर्फ इतना चाहता हूं कि संवाद उस सामग्री की चौड़ाई का आकार बदल जाए जो भरी हुई है। अभी, चौड़ाई केवल 300px (डिफ़ॉल्ट) पर रहती है और मुझे एक क्षैतिज स्क्रॉलबार मिलता है।

जहां तक ​​मैं बता सकता हूं, "autoResize" अब संवादों का विकल्प नहीं है, और जब मैं इसे निर्दिष्ट करता हूं तो कुछ भी नहीं होता है।

मैं प्रत्येक संवाद के लिए एक अलग फ़ंक्शन नहीं लिखने की कोशिश कर रहा हूं, इसलिए .dialog("option", "width", "500")वास्तव में एक विकल्प नहीं है, क्योंकि प्रत्येक संवाद की एक अलग चौड़ाई है।

निर्दिष्ट करना width: 'auto'संवाद विकल्पों के लिए संवाद को ब्राउज़र विंडो की चौड़ाई का 100% तक ले जाता है।

मेरे विकल्प क्या हैं? मैं jQuery UI 1.8rc1 के साथ jQuery 1.4.1 का उपयोग कर रहा हूं। ऐसा लगता है कि यह कुछ ऐसा होना चाहिए जो वास्तव में आसान हो।

संपादित करें: मैंने इसके लिए एक गुदगुदी समाधान लागू किया है, लेकिन मैं अभी भी एक बेहतर समाधान की तलाश कर रहा हूं।

javascript  jquery  ajax  jquery-ui  jquery-ui-dialog 
— womp
स्रोत

जवाबों:

250

मैंने सिर्फ JQuery 1.4.1 और UI 1.8rc1 का उपयोग करके एक छोटा सा नमूना ऐप लिखा है। मेरे द्वारा किए गए सभी निर्माणकर्ता के रूप में निर्दिष्ट किया गया था:

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

मुझे पता है कि आपने कहा था कि यह ब्राउज़र विंडो की 100% चौड़ाई लेता है, लेकिन यह यहाँ मीठा काम करता है, FF3.6, Chrome और IE8 में परीक्षण किया गया है।

मैं AJAX कॉल नहीं कर रहा हूं, बस मैन्युअल रूप से संवाद के HTML को बदल रहा हूं लेकिन यह मत सोचो कि किसी भी प्रोब का कारण होगा। क्या कोई अन्य सीएसएस सेटिंग इस पर दस्तक दे सकती है?

इसके साथ एकमात्र समस्या यह है कि यह चौड़ाई को ऑफ-सेंटर बनाता है, लेकिन मुझे यह समर्थन टिकट मिला जहां वे dialog('open')समस्या को ठीक करने के लिए एक सेटटाइमआउट में स्टेटमेंट को रखने के लिए वर्कअराउंड की आपूर्ति करते हैं ।

यहाँ मेरे सिर टैग की सामग्री है:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 'auto'
        });

        $('#one').click(function(){
            theDialog.html('some random text').dialog('open');
        });

        $('#two').click(function(){
            theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
        });

        $('#three').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
            setTimeout(function(){ theDialog.dialog('open') }, 100);;
        });
     });
</script>

मैंने Jquery UI के लिए http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip से js और css डाउनलोड किया । और शरीर:

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>
— फर्मिन
स्रोत
Fermin - अपने उदाहरण और पोस्ट के लिए धन्यवाद। यह पता चला है कि यह वास्तव में सीएसएस के साथ एक समस्या थी, हालांकि यह अभी भी स्पष्ट नहीं है कि सटीक समस्या क्या थी (यह निश्चित रूप से वैसे भी फायरब्रिगेड से स्पष्ट नहीं था)। मेरे सभी डायलॉग को शीर्ष स्तर पर ले जाकर डिफ़ॉल्ट 1.8.1 सीएसएस (हमारे थीम संस्करण के बजाय) का उपयोग करके यह बहुत अच्छा काम करता है। मैं धीरे-धीरे हमारे थीम संस्करण को वापस ले जाऊंगा जब 1.8.1 रिलीज ड्रॉप हो जाएगा, और इस मुद्दे की जड़ का पता लगाएगा। धन्यवाद!
— womp
कोई सम्स्या नहीं, मै खुश हूं कि सहायता कर सका। मैं पहले भी वहाँ गया था, यह एक समय में 1 सीएसएस स्टेटमेंट को स्थानांतरित करने का मामला है .... आनंद लें!
— फरमिन
2
IE7 हालांकि टूट गया लगता है
— एलेक्स
2
यदि आप सामग्री को लोड करने के लिए AJAX का उपयोग करते हैं, तो सेटटाइमआउट () एक विश्वसनीय समाधान प्रदान नहीं कर सकता है (उदाहरण के लिए, यदि सर्वर धीमा था और लोड करने के लिए 100ms से अधिक समय लगा)। एक बेहतर समाधान यह होगा कि खुले को चालू करने के लिए .ajax () विधि के कॉलबैक फ़ंक्शन का उपयोग किया जाए। इस तरह यह तब तक नहीं खुलेगा जब तक पेज लोड पूरा नहीं हो जाता।
— njbair
1
{'width':'auto'}IE7 में काम नहीं करता है और इसे ठीक नहीं किया जाएगा क्योंकि {'width':'auto'}विकल्प scott.gonzalez के अनुसार jQuery-UI द्वारा समर्थित नहीं है : "डायलॉग ऑटो चौड़ाई का समर्थन नहीं करता है। डॉक्स बताता है कि विकल्प केवल एक संख्या को स्वीकार करता है, जिसका उपयोग किया जाएगा। एक पिक्सेल आकार के लिए। इस बारे में चर्चा के लिए jquery-ui-dev थ्रेड देखें कि हम ऑटो चौड़ाई का समर्थन क्यों नहीं करेंगे। "
— व्लादिमीर कोर्ना
11

एक ही समस्या थी और धन्यवाद देने के लिए कि वास्तविक समस्या CSS से संबंधित थी, मुझे यह समस्या मिली:

आपके सीएसएस नियम के position:relativeबजाय होने से संवाद होता है और अजीब व्यवहार होता है।position:absolute.ui-dialogwidth:'auto'

.ui-dialog { position: absolute;}
— fortes
स्रोत
2

मुझे लगता है कि फ्लोट की स्थापना: संवाद के लिए छोड़ दिया काम करेगा। संभवत: संवाद बिल्कुल प्लगइन द्वारा पोस्ट किया जाता है, इस स्थिति में इसकी स्थिति इसके द्वारा निर्धारित की जाएगी, लेकिन फ्लोट के साइड-इफेक्ट तत्वों को केवल उतना ही चौड़ा करना जितना उन्हें सामग्री रखने की आवश्यकता होगी - फिर भी प्रभावी होगा।

यह काम करना चाहिए अगर आप बस एक नियम की तरह डालते हैं

.myDialog {float:left}

अपनी स्टाइलशीट में, हालाँकि आपको इसे jQuery का उपयोग करके सेट करना पड़ सकता है

— wheresrhys
स्रोत
2

मैं एक ही समस्या थी जब मैं इसी विषय उन्नयन के बिना 1.8.1 करने के लिए jquery यूआई उन्नत। केवल विषय को अपग्रेड करने के लिए भी आवश्यक है और "ऑटो" फिर से काम करता है।

— जेसुस अलोंसो
स्रोत
2

किसी कारण से मैं IE7 के साथ इस पूरे पृष्ठ की चौड़ाई की समस्या रखता था इसलिए मैंने यह हैक किया:

var tag = $("<div></div>");
//IE7 workaround
var w;
if (navigator.appVersion.indexOf("MSIE 7.") != -1)
    w = 400;
else
    w = "auto";

tag.html('My message').dialog({
    width: w,
    maxWidth: 600,
    ...
— एलेक्स
स्रोत
2

आप अधिकतम चौड़ाई निर्दिष्ट करके 100% चौड़ाई के मुद्दे से बच सकते हैं। maxWidthविकल्प काम नहीं लगती; इसलिए सीएसएस max-widthसंपत्ति को डायलॉग विजेट पर सेट करें ।

मामले में आप भी अधिकतम ऊंचाई को कम करना चाहते हैं, तो maxHeightविकल्प का उपयोग करें । यह आवश्यक होने पर एक स्क्रॉलबार को सही ढंग से दिखाएगा।

$(function() {
  var $dialog = $("#dialog");
  $dialog.dialog({
    autoOpen: false,
    modal: true,
    width: "auto"
  });
  /*
   * max-width should be set on dialog widget because maxWidth option has known issues
   * max-height should be set using maxHeight option
   */
  $dialog.dialog("widget").css("max-width", $(window).width() - 100);
  $dialog.dialog("option", "maxHeight", $(window).height() - 100);
  $(".test-link").on("click", function(e) {
    e.preventDefault();
    $dialog.html($(this.hash).html());
    // if you change the content of dialog after it is created then reset the left
    // coordinate otherwise content only grows up to the right edge of screen
    $dialog.dialog("widget").css({ left: 0 });
    $dialog.dialog("open");
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog"></div>

<!-- test links -->

<p>
  <a href="#content-1" class="test-link">Image (Landscape)</a>
  <a href="#content-2" class="test-link">Image (Portrait)</a>
  <a href="#content-3" class="test-link">Text Content (Small)</a>
  <a href="#content-4" class="test-link">Text Content (Large)</a>
</p>
<p>If you are viewing in Stack Snippets > Full page then reload the snippet so that window height is recalculated (Right click > Reload frame).</p>

<!-- sample content -->

<div id="content-1" style="display: none;">
  <img src="https://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>

<div id="content-2" style="display: none;">
  <img src="https://i.stack.imgur.com/9pVkn.jpg" width="300" height="400">
</div>

<div id="content-3" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
</div>

<div id="content-4" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
  <p>Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.</p>
  <p>Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.</p>
  <p>Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.</p>
</div>
स्निपेट का विस्तार करें

— सलमान ए
स्रोत
1

मुझे भी ऐसी ही समस्या का समाधान करना पड़ा था।

मेरे लिए ठीक काम widthकरने के लिए सेटिंग, "auto"लेकिन जब संवाद में बहुत अधिक पाठ होता है तो यह maxWidthसेटिंग की अनदेखी करते हुए पृष्ठ की पूरी चौड़ाई को फैला देता है ।

हालांकि ठीक काम maxWidthपर सेटिंग create:

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
— TSI
स्रोत
1

मुझे भी यह समस्या थी।

मुझे इसके साथ काम करना पड़ा:

.ui-dialog{
    display:inline-block;
}
— केन क्यू
स्रोत
1

आपको बस इतना करना है:

width: '65%',
— taggartJ
स्रोत
ओपी के सवाल के आधार पर, वह अपने सभी संवाद बॉक्स के लिए काम नहीं करेगा, और उसे अभी भी प्रत्येक संवाद बॉक्स को व्यक्तिगत रूप से सेट करना होगा।
— रॉलोफ्स
0

मेरे पास एक ही समस्या है और स्थिति है: आपके .ui- संवाद {} सीएसएस में निरपेक्ष पर्याप्त नहीं था। मैंने उस स्थिति पर ध्यान दिया: रिश्तेदार वास्तविक तत्व की प्रत्यक्ष शैली पर सेट किया जा रहा था, इसलिए .ui- डायलॉग सीएसएस परिभाषा को अधिलेखित किया जा रहा था। सेटिंग की स्थिति: उस div पर निरपेक्ष जो मैं एक संवाद बनाने जा रहा था, वह भी काम नहीं करता था।

अंत में मैंने इस काम को करने के लिए अपने स्थानीय jQuery में दो को बदल दिया।

मैंने निम्नलिखित लाइन को jQuery में बदल दिया है:

elem.style.position = "absolute";

पर https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62

इसके अलावा, चूंकि मेरे संवाद को ड्रैग करने योग्य बनाया गया था, इसलिए मुझे इस लाइन को jQuery-ui में बदलना पड़ा:

this.element[0].style.position = 'absolute';

पर https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48

शायद शैली के माध्यम से मैं और अधिक अच्छी तरह से चीजों को ठीक कर सकता हूं, लेकिन मैंने सोचा कि मुझे यह काम कैसे मिला।

— स्कॉट
स्रोत
0

यदि आपको 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

इस bellow को संपादित करें:

$("#message").dialog({
	autoOpen:false,
	modal:true,
	resizable: false,
	width:'80%',
स्निपेट का विस्तार करें

— कार्ल 256
स्रोत
3
कृपया अपने कोड में कुछ स्पष्टीकरण जोड़ें - किसी को आपके उत्तर को क्यों संपादित करना चाहिए?
— निको हसे
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.