ทำให้ JQuery UI Dialog ขยายหรือย่อโดยอัตโนมัติเพื่อให้พอดีกับเนื้อหา

131

ฉันมีป๊อปอัพกล่องโต้ตอบ JQuery UI ที่แสดงแบบฟอร์ม โดยการเลือกตัวเลือกบางตัวในแบบฟอร์มตัวเลือกใหม่จะปรากฏในแบบฟอร์มทำให้สูงขึ้น สิ่งนี้สามารถนำไปสู่สถานการณ์สมมติที่หน้าหลักมีแถบเลื่อนและกล่องโต้ตอบ JQuery UI มีแถบเลื่อน สถานการณ์สองแถบเลื่อนนี้ไม่น่าดูและสร้างความสับสนให้กับผู้ใช้

ฉันจะทำให้กล่องโต้ตอบ JQuery UI ขยาย (และอาจหดเล็กลง) เพื่อให้พอดีกับเนื้อหาเสมอโดยไม่ต้องแสดงแถบเลื่อนได้อย่างไร ฉันต้องการให้เห็นเฉพาะแถบเลื่อนในหน้าหลักเท่านั้น

jquery jquery-ui jquery-ui-dialog

— MikeN
แหล่งที่มา

1

ฉันขอแนะนำให้โพสต์ตัวอย่างของโค้ดเป็นการยากที่จะแนะนำวิธีแก้ปัญหาโดยไม่เห็นโครงสร้างของกล่องโต้ตอบ

— Diego

139

อัปเดต:สำหรับ jQuery UI 1.8 โซลูชันการทำงาน (ตามที่กล่าวไว้ในความคิดเห็นที่สอง) คือการใช้:

width: 'auto'

ใช้ตัวเลือก autoResize: true ฉันจะอธิบาย:

  <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
แหล่งที่มา

อืม .. จะต้องขยายFrameDialogของฉัน... โดยพื้นฐานแล้วเป็นวิธีการที่สร้างเนื้อหา iframed เพื่อใช้กับกล่องโต้ตอบ .. มันไม่สมบูรณ์แบบ แต่ทำงานได้ดีสำหรับโครงการที่ฉันต้องการ

— Tracker1

20

สิ่งนี้ไม่ได้ผลสำหรับฉัน แต่ฉันตั้งค่าตัวเลือก "width" เป็น "auto" แทน

— แซม

+1 ให้กับความคิดเห็น - มันใช้ได้ผลสำหรับฉันและตัวอย่างก็ใช้ได้เช่นกันดังนั้นฉันต้องจินตนาการว่าสิ่งนี้ไม่ได้เปลี่ยนไป แต่เดี๋ยวก่อนถ้าทุกอย่างล้มเหลวลองดูสิ

— cgp

สิ่งนี้ใช้ไม่ได้กับความกว้าง แต่ใช้ได้กับความสูงเท่านั้น

— Walt W

18

คำตอบนี้ใช้ไม่ได้อีกต่อไปสำหรับเวอร์ชัน 1.8.4 แทนที่จะใช้ height auto forum.jquery.com/topic/dialog-auto-width

— Jeff

48

คำตอบคือการตั้งค่า

autoResize:true

คุณสมบัติเมื่อสร้างกล่องโต้ตอบ เพื่อให้สิ่งนี้ใช้งานได้คุณไม่สามารถตั้งค่าความสูงใด ๆ สำหรับกล่องโต้ตอบ ดังนั้นหากคุณตั้งค่าความสูงคงที่เป็นพิกเซลสำหรับกล่องโต้ตอบในวิธีการของผู้สร้างหรือผ่านรูปแบบใด ๆ คุณสมบัติ autoResize จะไม่ทำงาน

— MikeN
แหล่งที่มา

9

เยี่ยมมาก :) แต่ทำไม jQuery ถึงไม่ใส่สิ่งนั้นไว้ในเอกสารของพวกเขา!. ยังไงก็ขอขอบคุณ

— Wahid Bitar

ระวังไม่ทำงานกับการวางตำแหน่งโดยปลั๊กอินทริกเกอร์ (ที่, ของฉัน, ปิด ฯลฯ )

— Jeffz

26

ใช้งานได้กับ jQuery UI v1.10.3

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

— IlludiumPu36
แหล่งที่มา

ทำงานให้ฉันด้วย (v1.11.1)

— Jay Cummins

11

ฉันใช้คุณสมบัติต่อไปนี้ซึ่งใช้ได้ดีสำหรับฉัน:

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

— emolah
แหล่งที่มา

2

รองรับความสูงอัตโนมัติ

ความกว้างไม่ใช่!

ในการทำบางประเภทโดยอัตโนมัติให้รับขนาดของ div ที่คุณกำลังแสดงจากนั้นตั้งค่าหน้าต่างด้วย

ในรหัส 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มีช่องว่างด้านขวาขึ้นอยู่กับเบราว์เซอร์ (Firefox แตกต่างจาก Chrome) เพื่อให้คุณสามารถเพิ่มอัตนัยจำนวน "ดีพอ" ของพิกเซล.scrollWidthหรือแทนที่ด้วยฟังก์ชั่นความกว้างคำนวณของคุณเอง

คุณอาจต้องการรวมไว้width: 0ใน.dialog()ตัวเลือกของคุณเนื่องจากวิธีนี้จะไม่ลดความกว้าง แต่จะเพิ่มขึ้นเท่านั้น

ผ่านการทดสอบการทำงานใน IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 และ Opera 22

— วลาดิเมียร์ Kornea
แหล่งที่มา

1

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

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

ทำในสิ่งที่ฉันต้องการเพื่อปรับขนาดความกว้างของกล่องโต้ตอบ

— user596393
แหล่งที่มา