Secara otomatis mengubah ukuran dialog jQuery UI menjadi lebar konten yang dimuat oleh ajax

Saya mengalami banyak kesulitan menemukan informasi dan contoh spesifik tentang ini. Saya punya sejumlah dialog jQuery UI di aplikasi saya yang dilampirkan ke div yang dimuat dengan panggilan .ajax (). Mereka semua menggunakan panggilan penyiapan yang sama:

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

Saya hanya ingin mengubah ukuran dialog menjadi lebar konten yang dimuat. Saat ini, lebarnya hanya tetap di 300px (default) dan saya mendapatkan scrollbar horizontal.

Sejauh yang saya tahu, "autoResize" tidak lagi menjadi opsi untuk dialog, dan tidak ada yang terjadi saat saya menentukannya.

Saya mencoba untuk tidak menulis fungsi terpisah untuk setiap dialog, jadi .dialog("option", "width", "500")sebenarnya bukan merupakan pilihan, karena setiap dialog akan memiliki lebar yang berbeda.

Menentukan width: 'auto'opsi dialog hanya membuat dialog mengambil 100% dari lebar jendela browser.

Apa saja pilihan saya? Saya menggunakan jQuery 1.4.1 dengan jQuery UI 1.8rc1. Sepertinya ini harus menjadi sesuatu yang sangat mudah.

EDIT: Saya telah menerapkan solusi kludgy untuk ini, tetapi saya masih mencari solusi yang lebih baik.

Saya baru saja menulis aplikasi sampel kecil menggunakan JQuery 1.4.1 dan UI 1.8rc1. Yang saya lakukan hanyalah menentukan konstruktor sebagai:

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

Saya tahu Anda mengatakan bahwa ini membuat 100% lebar jendela browser tetapi berfungsi dengan baik di sini, diuji di FF3.6, Chrome dan IE8.

Saya tidak membuat panggilan AJAX, hanya mengubah HTML dialog secara manual tetapi tidak berpikir itu akan menyebabkan masalah. Mungkinkah beberapa pengaturan css lain bisa mengalahkan ini?

Satu-satunya masalah dengan ini adalah bahwa itu membuat lebar tidak berada di tengah tetapi saya menemukan tiket dukungan ini di mana mereka menyediakan solusi untuk menempatkan dialog('open')pernyataan di setTimeout untuk memperbaiki masalah.

Berikut isi tag kepala saya:

<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>

Saya mengunduh js dan css untuk Jquery UI dari http://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zip . dan tubuh:

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>

Memiliki masalah yang sama dan terima kasih untuk menyebutkan bahwa masalah sebenarnya terkait dengan CSS, saya menemukan masalah tersebut:

Memiliki position:relativealih-alih position:absolutedalam .ui-dialogaturan CSS Anda membuat dialog dan width:'auto'berperilaku aneh.

.ui-dialog { position: absolute;}

Inilah cara saya melakukannya:

Dialog UI jQuery yang responsif (dan perbaikan untuk bug maxWidth)

Memperbaiki maxWidth & width: auto bug.

Anda dapat menghindari masalah lebar 100% dengan menentukan lebar maksimum. The maxWidthpilihan tampaknya tidak bekerja; jadi setel max-widthproperti CSS pada widget dialog sebagai gantinya.

Jika Anda juga ingin membatasi ketinggian maksimum, gunakan maxHeightopsi. Ini akan menampilkan scrollbar dengan benar bila perlu.

$(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>

Saya membayangkan pengaturan float: left agar dialog akan berfungsi. Agaknya dialog benar-benar diposisikan oleh plugin, dalam hal ini posisinya akan ditentukan oleh ini, tetapi efek samping float - membuat elemen hanya selebar yang dibutuhkan untuk menampung konten - akan tetap berlaku.

Ini akan berhasil jika Anda hanya membuat aturan seperti

.myDialog {float:left}

di stylesheet Anda, meskipun Anda mungkin perlu mengaturnya menggunakan jQuery

Saya memiliki masalah yang sama ketika saya mengupgrade jquery UI ke 1.8.1 tanpa mengupgrade tema yang sesuai. Hanya diperlukan untuk meningkatkan tema juga dan "otomatis" berfungsi kembali.

Untuk beberapa alasan saya terus mengalami masalah lebar halaman penuh dengan IE7 jadi saya membuat peretasan ini:

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,
    ...

Saya punya masalah serupa.

Pengaturan widthuntuk "auto"baik bekerja untuk saya tetapi ketika dialog berisi banyak teks itu membuatnya span lebar penuh halaman, mengabaikan maxWidthpengaturan.

Pengaturan maxWidthpada createberfungsi dengan baik:

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});

Saya punya masalah ini juga.

Saya membuatnya bekerja dengan ini:

.ui-dialog{
    display:inline-block;
}

Yang perlu Anda lakukan hanyalah menambahkan:

width: '65%',

Saya memiliki masalah yang sama dan memiliki posisi: absolut dalam .ui-dialog {} css Anda tidak cukup. Saya perhatikan bahwa position: relative sedang disetel pada gaya langsung elemen sebenarnya, jadi definisi css .ui-dialog akan ditimpa. Posisi pengaturan: absolut pada div Saya akan membuat dialog secara statis juga tidak berfungsi.

Pada akhirnya saya mengubah dua ditempatkan di jQuery lokal saya untuk membuat ini berfungsi.

Saya mengubah baris berikut di jQuery menjadi:

elem.style.position = "absolute";

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

Juga, karena dialog saya disetel ke draggable, saya harus mengubah baris ini juga di jQuery-ui menjadi:

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

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

Mungkin melalui gaya yang saya miliki secara lebih menyeluruh akan memperbaiki banyak hal, tetapi saya pikir saya akan membagikan bagaimana saya membuat ini berfungsi.

Jika Anda membutuhkannya untuk bekerja di IE7, Anda tidak dapat menggunakan opsi tidak berdokumen, buggy, dan tidak didukung {'width':'auto'} . Sebagai gantinya, tambahkan yang berikut ini ke Anda .dialog():

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

Apakah .scrollWidthmenyertakan padding sisi kanan tergantung pada browser (Firefox berbeda dari Chrome), jadi Anda dapat menambahkan jumlah piksel yang "cukup baik" .scrollWidthatau menggantinya dengan fungsi penghitungan lebar Anda sendiri.

Anda mungkin ingin memasukkan di width: 0antara .dialog()pilihan Anda , karena metode ini tidak akan pernah mengurangi lebarnya, hanya menambahnya.

Diuji untuk berfungsi di IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35, dan Opera 22.

Menambah jawaban Vladimir Kornea.

Saya ingin cara untuk mengatur lebar kecuali jika layar terlalu kecil, kemudian lebar dinamis. Bit yang tidak benar-benar "responsif" berfungsi dengan baik untuk banyak kasus.

, 'open': function(){
   var resposive_width = ($( window ).width() > 640) ? 640 : ($( window ).width() - 20);
   $(this).dialog('option', 'width', resposive_width)
 }

edit di bawah ini:

$("#message").dialog({
	autoOpen:false,
	modal:true,
	resizable: false,
	width:'80%',