জিকুয়েরি ইউআই ডায়ালগ এর সামগ্রীতে ফিট করার জন্য স্বয়ংক্রিয়ভাবে বৃদ্ধি বা সঙ্কুচিত করুন

Question

আমার কাছে একটি জিকুয়ারি ইউআই ডায়ালগ পপআপ রয়েছে যা একটি ফর্ম প্রদর্শন করে। ফর্মটিতে কয়েকটি বিকল্প নির্বাচন করে নতুন বিকল্পগুলি ফর্মটিতে উপস্থিত হবে যা এটি লম্বা হওয়ার কারণ ঘটায়। এটি এমন দৃশ্যে নিয়ে যেতে পারে যেখানে প্রধান পৃষ্ঠায় একটি স্ক্রোলবার রয়েছে এবং জিকুয়েরি ইউআই ডায়ালগটিতে একটি স্ক্রোলবার রয়েছে। এই দ্বি-স্ক্রোলবার দৃশ্যটি ব্যবহারকারীর পক্ষে কৃপণ এবং বিভ্রান্তিকর।

আমি কীভাবে JQuery UI ডায়ালগটি বর্ধনযোগ্য করে তুলতে পারি (এবং সম্ভবত সঙ্কুচিত) সবসময় কোনও স্ক্রোলবার না দেখিয়ে এর সামগ্রীতে ফিট করতে পারি? আমি পছন্দ করবো যে মূল পৃষ্ঠায় কেবল একটি স্ক্রোলবার দৃশ্যমান is

Comments

আমি কোডের একটি নমুনা পোস্ট করার পরামর্শ দেব, ডায়ালগটির কাঠামো না দেখে সমাধানের প্রস্তাব দেওয়া কঠিন।

— দিয়েগো

Answer 1

আপডেট: jQuery UI 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

Comments

হুম .. আমার ফ্রেমডায়ালগটি প্রসারিত করতে হবে ... এটি মূলত এমন একটি পদ্ধতি যা সংলাপের সাথে ব্যবহারের জন্য একটি আইফ্রেমেড সামগ্রী তৈরি করে .. এটি নিখুঁত নয়, তবে আমার প্রয়োজন এমন একটি প্রকল্পের জন্য ভাল কাজ করা।

— ট্র্যাকার 1

এটি আমার পক্ষে কাজ করে না। পরিবর্তে, আমি বিকল্পটি "প্রস্থ" "" অটো "তে সেট করেছি।

— স্যাম

মন্তব্যে +1 - এটি আমার পক্ষে কাজ করেছে, এবং উদাহরণটিও কার্যকরভাবে কাজ করে, তাই আমার কল্পনা করতে হবে এটি পরিবর্তিত হয়নি, তবে আরে, অন্য সমস্ত কিছু যদি ব্যর্থ হয় তবে এটিকে শট দিন।

— সিজিপি

এটি যদিও প্রস্থের জন্য কাজ করে না, এটি কেবলমাত্র আমার মনে হয় উচ্চতার জন্য কাজ করে।

— ওয়াল্ট ডাব্লু

এই উত্তরটি এখন আর 1.8.4 সংস্করণের জন্য বৈধ নয় পরিবর্তে উচ্চতা অটো ফোরাম

— জেফ

Answer 2

উত্তর সেট করা হয়

autoResize:true 

সংলাপ তৈরি করার সময় সম্পত্তি property এটি কাজ করার জন্য আপনি ডায়ালগটির জন্য কোনও উচ্চতা নির্ধারণ করতে পারবেন না। সুতরাং আপনি যদি তার নির্মাতা পদ্ধতিতে বা কোনও স্টাইলের মাধ্যমে ডায়ালগটির জন্য পিক্সেলগুলিতে একটি নির্দিষ্ট উচ্চতা নির্ধারণ করেন তবে স্বয়ংক্রিয়রূপে সম্পত্তি কাজ করবে না।

Comments

কল্পনাপ্রসূত :) তবে jQuery তাদের ডকুমেন্টেশনে এটি কেন রাখেনি?!। যাইহোক আপনাকে ধন্যবাদ

— ওয়াহিদ বিটার

সতর্কতা অবলম্বন করুন, ট্রিগার প্লাগইন (এ, আমার, বন্ধ ইত্যাদি) দ্বারা

— পজিশনিংয়ের

Answer 3

এটি jQuery UI v1.10.3 এর সাথে কাজ করে

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

Comments

আমার জন্যও কাজ করেছেন (v1.11.1)।

— জে কামিন্স

Answer 4

আমি নিম্নলিখিত সম্পত্তিটি ব্যবহার করি যা আমার পক্ষে ভাল কাজ করে:

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

Answer 5

উচ্চতা অটোতে সমর্থিত।

প্রস্থ হয় না!

কোনও ধরণের অটো করার জন্য আপনি যে ডিভটি দেখছেন সেটির আকার পান এবং তারপরে উইন্ডোটি সেট করুন।

সি # কোডে ..

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

Answer 6

আইই 7 এ কাজ করার জন্য আপনার যদি এটির প্রয়োজন হয় তবে আপনি অনিবন্ধিত, বগী এবং অসমর্থিত {'width':'auto'} বিকল্পটি ব্যবহার করতে পারবেন না । পরিবর্তে, আপনার নিম্নলিখিতটি যুক্ত করুন .dialog():

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

.scrollWidthডান দিকের প্যাডিং অন্তর্ভুক্ত কিনা ব্রাউজারের উপর নির্ভর করে (ফায়ারফক্স ক্রোম থেকে পৃথক), তাই আপনি হয় কোনও ব্যক্তিক "যথেষ্ট যথেষ্ট" পিক্সেলের সংখ্যাকে যুক্ত করতে পারেন .scrollWidth, বা এটি আপনার নিজের প্রস্থ-গণনা ফাংশন দিয়ে প্রতিস্থাপন করতে পারেন।

আপনি width: 0আপনার .dialog()বিকল্পগুলির মধ্যে অন্তর্ভুক্ত করতে চাইতে পারেন , যেহেতু এই পদ্ধতিটি প্রস্থটি কখনই কমবে না, কেবল এটি বৃদ্ধি করবে।

আই 7, আই 8, আই 9, আই 10, আই 11, ফায়ারফক্স 30, ক্রোম 35, এবং অপেরা 22 এ কাজ করার জন্য পরীক্ষিত।

Answer 7

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

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

ডায়লগটির প্রস্থের আকার পরিবর্তন করার জন্য আমার যা করা দরকার ছিল তা করেছি।