JQuery UI Dialog'un içeriğine uyacak şekilde otomatik olarak büyümesini veya küçülmesini sağlayın

131

Form görüntüleyen bir JQuery UI iletişim kutusu açılır pencerem var. Formda belirli seçenekleri seçtiğinizde, formda yeni seçenekler görünecek ve formun uzamasına neden olacaktır. Bu, ana sayfanın bir kaydırma çubuğuna ve JQuery UI iletişim kutusunun bir kaydırma çubuğuna sahip olduğu bir senaryoya yol açabilir. Bu iki kaydırma çubuğu senaryosu, kullanıcı için çirkin ve kafa karıştırıcıdır.

JQuery UI iletişim kutusunun, bir kaydırma çubuğu göstermeden içeriğini her zaman sığacak şekilde büyümesini (ve muhtemelen küçülmesini) nasıl sağlayabilirim? Ana sayfada yalnızca bir kaydırma çubuğunun görünmesini tercih ederim.

jquery jquery-ui jquery-ui-dialog

— Miken
kaynak

1

Kodun bir örneğini göndermenizi öneririm, iletişim kutusunun yapısını görmeden bir çözüm önermek zordur.

— Diego

139

Güncelleme: jQuery UI 1.8'den itibaren, çalışma çözümü (ikinci yorumda belirtildiği gibi) şunları kullanmaktır:

width: 'auto'

AutoResize: true seçeneğini kullanın. Göstereceğim:

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

İşte çalışan bir örnek: http://jsbin.com/ubowa

— CGP
kaynak

Hmm .. FrameDialog'umu genişletmek zorunda kalacak ... temelde diyalogla kullanmak için iç çerçeveli içerik oluşturan bir yöntem .. mükemmel değil, ama ihtiyacım olan bir proje için iyi çalışıyor.

— İzleyici1

20

Bu benim için işe yaramadı. Bunun yerine "genişlik" seçeneğini "otomatik" olarak ayarlıyorum.

— Sam

Yoruma +1 - benim için işe yaradı ve örnek de işe yarıyor, bu yüzden bunun değişmediğini hayal etmeliyim, ama hey, her şey başarısız olursa, bir şans ver.

— cgp

Bu genişlik için çalışmıyor, sadece bence yükseklik için çalışıyor.

— Walt W

18

Bu cevap artık 1.8.4 sürümü için geçerli değil, bunun yerine height auto forum.jquery.com/topic/dialog-auto-width adresini

— Jeff

48

Cevap,

autoResize:true

iletişim kutusu oluştururken özellik. Bunun çalışması için diyalog için herhangi bir yükseklik ayarlayamazsınız. Dolayısıyla, oluşturucu yönteminde veya herhangi bir stil aracılığıyla iletişim kutusu için piksel cinsinden sabit bir yükseklik ayarlarsanız, autoResize özelliği çalışmayacaktır.

— Miken
kaynak

9

Harika :) ama jQuery neden bunu belgelerine koymadı?!. Neyse teşekkür ederim.

— Wahid Bitar

dikkatli, tetik eklentisi ile konumlandırmayla çalışmıyor (at, my, off vb.)

— Jeffz

26

Bu, jQuery UI v1.10.3 ile çalışır.

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

— IlludiumPu36
kaynak

Benim için de çalıştı (v1.11.1).

— Jay Cummins

11

Benim için iyi çalışan aşağıdaki özelliği kullandım:

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

— emolah
kaynak

2

Yükseklik otomatik olarak desteklenir.

Genişlik değil!

Bir tür otomatik yapmak için, gösterdiğiniz div'in boyutunu alın ve ardından pencereyi ayarlayın.

C # kodunda ..

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);
    }

— Demz
kaynak

2

IE7'de çalışmasına ihtiyacınız varsa, belgelenmemiş, buggy ve desteklenmeyen {'width':'auto'} seçeneği kullanamazsınız . Bunun yerine aşağıdakileri ekleyin .dialog():

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

İster .scrollWidthya piksel öznel bir "yeterince iyi" numara ekleyebilirsiniz böylece sağ taraftaki dolgu, tarayıcı (Chrome'dan Firefox farklıdır) bağlıdır içerir .scrollWidthveya kendi genişlik hesaplama fonksiyonu ile değiştirin.

Seçenekleriniz width: 0arasına dahil etmek isteyebilirsiniz .dialog(), çünkü bu yöntem genişliği asla azaltmayacaktır, sadece artıracaktır.

IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 ve Opera 22'de çalışmak üzere test edilmiştir.

— Vladimir Kornea
kaynak

1

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

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

iletişim kutusunun genişliğini yeniden boyutlandırmak için yapmam gereken şeyi yaptım.

— user596393
kaynak