<ফিল্ডসেট> ভুল আকার পরিবর্তন করে; অপরিবর্তনীয় `মিনিট প্রস্থ: ন্যূনতম সামগ্রী` বলে মনে হচ্ছে `

Question

সমস্যা

আমার এমন একটি রয়েছে <select>যেখানে <option>এর পাঠ্য মানগুলির মধ্যে একটি খুব দীর্ঘ। আমি <select>আকারটি পরিবর্তন করতে চাই যাতে এটি এর পিতামাতার চেয়ে কখনও বৃহত্তর হয় না, এমনকি যদি এটির প্রদর্শিত পাঠ্য কেটে ফেলতে হয়। max-width: 100%এটা করা উচিত।

আকার পরিবর্তন করার আগে:

আকার পরিবর্তন করার পরে আমি যা চাই:

তবে আপনি যদি এই জেএসফিডাল উদাহরণটি লোড করেন এবং ফলাফল প্যানেলের প্রস্থটি এর চেয়ে ছোট হতে আকার পরিবর্তন করেন তবে <select>আপনি দেখতে পাচ্ছেন যে অভ্যন্তরের নির্বাচনটি <fieldset>এর প্রস্থটি নিচে স্কেল করতে ব্যর্থ হয়েছে।

পুনরায় আকার দেওয়ার পরে আমি আসলে যা দেখছি:

যাইহোক, একটি স্কেলের পরিবর্তে একটি সমতুল্য পৃষ্ঠাটি<div><fieldset> সঠিকভাবে। আপনি যে দেখতে এবং করতে আরো সহজে আপনার পরিবর্তনগুলি পরীক্ষা যদি আপনি একটি <fieldset>এবং একটি <div>একটি পৃষ্ঠা একে অপরের পাশে । এবং আপনি যদি আশেপাশের <fieldset>ট্যাগগুলি মুছে ফেলেন তবে আকার পরিবর্তন করে। <fieldset>ট্যাগ একরকম অনুভূমিক মাপ পরিবর্তনকারী বিরতি সৃষ্টি করছে।

<fieldset>কাজ যেন একটা সিএসএস নিয়ম হল fieldset { min-width: min-content; }। ( min-contentমানে, প্রায়, ক্ষুদ্রতম প্রস্থ ওভারফ্লো একটি শিশু কারণ যে নেই।) যদি আমি প্রতিস্থাপন <fieldset>একটি সঙ্গে <div>সঙ্গেmin-width: min-content চললে তো এমনই মনে হচ্ছে। তবুও min-contentআমার শৈলীতে, ব্রাউজারের ডিফল্ট স্টাইলশিটে বা ফায়ারবাগের সিএসএস পরিদর্শকটিতে দৃশ্যমান কোনও নিয়ম নেই । আমি <fieldset>ফায়ারব্যাগের সিএসএস ইন্সপেক্টর এবং ফায়ারফক্সের ডিফল্ট স্টাইলশিট ফর্ম। CSS এ দৃশ্যমান প্রতিটি স্টাইলকে ওভাররাইড করার চেষ্টা করেছি , কিন্তু তাতে কোনও লাভ হয়নি। বিশেষত ওভাররাইডিং min-widthএবং widthকোনও কিছুই করেনি।

কোড

ফিল্ডসেটের এইচটিএমএল:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

আমার সিএসএস যা কাজ করা উচিত তবে তা নয়:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

রিসেট widthকরার বৈশিষ্ট্য অক্ষমতা কিছুই না:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

আরও সিএসএস যেখানে আমি চেষ্টা করেছি এবং সমস্যাটি সমাধান করতে ব্যর্থ :

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

আরো বিস্তারিত

সমস্যাটি এই আরও বিস্তৃত, আরও জটিল জেএসফিডেলের উদাহরণে ঘটেছিল , যা ওয়েব পৃষ্ঠার সাথে আরও সাদৃশ্যপূর্ণ যা আমি আসলে ঠিক করার চেষ্টা করছি। আপনি এটি থেকে দেখতে পারেন যে <select>সমস্যাটি নয় - একটি ইনলাইন-ব্লকও divআকার পরিবর্তন করতে ব্যর্থ। যদিও এই উদাহরণটি আরও জটিল, আমি ধরে নিয়েছি যে উপরের সরল মামলার ফিক্সও এই আরও জটিল কেসটিকে ঠিক করবে।

[সম্পাদনা করুন: নীচে ব্রাউজার সমর্থন বিশদ দেখুন]]

এই সমস্যাটি সম্পর্কে একটি কৌতূহলজনক বিষয় হ'ল আপনি যদি সেটdiv.wrapper { width: 50%; }<fieldset> করেন, বিন্দুতে নিজেকে পুনরায় আকার দেওয়া বন্ধ করে দেয় তবে পূর্ণ আকারের <select>ভিউপোর্টের প্রান্তে আঘাত হানে। যদিও এই ঘটবে যেন <select>হয়েছে width: 100%, যদিও <select>সৌন্দর্য এটা আছে মত width: 50%।

আপনি যদি দিতে <select>নিজেইwidth: 50% যে আচরণ ঘটবে না; প্রস্থটি সঠিকভাবে সেট করা আছে।

আমি এই পার্থক্যের কারণ বুঝতে পারি না। তবে এটি প্রাসঙ্গিক নাও হতে পারে।

আমিও পাওয়া অনুরূপ প্রশ্ন এইচটিএমএল fieldset শিশু অনির্দিষ্টকালের জন্য প্রসারিত করতে পারবেন । প্রশ্নকর্তা কোনও সমাধান খুঁজে পেলেন না এবং অনুমান করেন যে এটিকে অপসারণ করা ছাড়া কোনও সমাধান নেই<fieldset> । তবে আমি ভাবছি, যদি সত্যিই <fieldset>প্রদর্শনটি সঠিকভাবে করা অসম্ভব তবে তা কেন? কী <fieldset>এর বৈশিষ্ট বা ডিফল্ট সিএসএস ( এই প্রশ্নের যেমন ) এই আচরণ কারণ? এই বিশেষ আচরণটি সম্ভবত কোথাও নথিভুক্ত করা হয়েছে, যেহেতু একাধিক ব্রাউজারগুলি এটির মতো কাজ করে।

পটভূমি লক্ষ্য এবং প্রয়োজনীয়তা

যে কারণে আমি এটি করার চেষ্টা করছি তা হ'ল একটি বড় ফর্ম সহ একটি বিদ্যমান পৃষ্ঠার জন্য মোবাইল স্টাইল লেখার অংশ হিসাবে। ফর্মটির একাধিক বিভাগ রয়েছে এবং এর একটি অংশ একটিতে আবৃত রয়েছে <fieldset>। একটি স্মার্টফোনে (বা আপনি যদি নিজের ব্রাউজার উইন্ডোটিকে ছোট করে রাখেন) তবে পৃষ্ঠার অংশটির অংশটি <fieldset>বাকী ফর্মের চেয়ে অনেক বেশি বিস্তৃত। বেশিরভাগ ফর্মটি তার প্রস্থকে ঠিক সূক্ষ্মভাবে সীমাবদ্ধ করে, তবে বিভাগটি <fieldset>না করে ব্যবহারকারীকে জুম আউট করতে বা or বিভাগের সমস্ত দেখতে ডানদিকে স্ক্রোল করতে বাধ্য করে।

আমি কেবল মুছে ফেলার বিষয়ে সতর্ক <fieldset>, কারণ এটি একটি বড় অ্যাপ্লিকেশনে অনেক পৃষ্ঠায় উত্পন্ন হয় এবং আমি নিশ্চিত নই যে সিএসএস বা জাভাস্ক্রিপ্টে নির্বাচকরা এর উপর নির্ভর করতে পারে।

আমার প্রয়োজন হলে আমি জাভাস্ক্রিপ্ট ব্যবহার করতে পারি এবং একটি জাভাস্ক্রিপ্ট সমাধান কিছুই না থেকে ভাল than তবে জাভাস্ক্রিপ্ট যদি এটি করার একমাত্র উপায় হয় তবে আমি কেন কেবল সিএসএস এবং এইচটিএমএল ব্যবহার করে এটি সম্ভব নয় তা সম্পর্কে একটি ব্যাখ্যা শুনতে আগ্রহী।

---

সম্পাদনা করুন: ব্রাউজার সমর্থন

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

আমি আমার ভাঙ্গা fieldsetউদাহরণটি বিভিন্ন ব্রাউজারে পুনরায় লিখেছি । এটি আসলে এই ব্রাউজারগুলিতে ইতিমধ্যে কাজ করে:

• ইন্টারনেট এক্সপ্লোরার 8, 9, এবং 10
• ক্রৌমিয়াম
• অ্যান্ড্রয়েডের জন্য ক্রোম

এটি এই ব্রাউজারগুলিতে বিরতি দেয়:

• ফায়ারফক্স
• অ্যান্ড্রয়েডের জন্য ফায়ারফক্স
• ইন্টারনেট এক্সপ্লোরার 7

সুতরাং, আমি যে বর্তমান ব্রাউজারটির বর্তমান কোডটি ভেঙে ফেলি সে সম্পর্কে ফায়ারফক্স (ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রে) কেবলমাত্র যত্নশীল। কোডটি যদি ঠিক করা থাকে তবে এটি অন্য কোনও ব্রাউজারে না ভেঙে ফায়ারফক্সে কাজ করেছিল, এটি আমার সমস্যার সমাধান করবে।

সাইট এইচটিএমএল টেমপ্লেট ইন্টারনেট এক্সপ্লোরার শর্তসাপেক্ষ মন্তব্য ব্যবহার শ্রেণীর যেমন যোগ করার জন্য .ie8এবং .oldieজন্য <html>উপাদান। আপনি যদি আইএসে স্টাইলিংয়ের পার্থক্যের আশেপাশে কাজ করতে চান তবে আপনি আপনার সিএসএসে এই ক্লাসগুলি ব্যবহার করতে পারেন। যোগ করা ক্লাসগুলি এইচটিএমএল 5 বয়লারপ্লেটের পুরানো সংস্করণটির মতো ।

Comments

এই চমৎকার লেখার জন্য অভিনন্দন

— Alp

আপনার সহজ উদাহরণ: <fieldset>(বা div.wrapper) যে প্রস্থের প্রয়োজন তা দিন এবং select { width:100% }। max-widthউপাদানটি তার পিতামাতার মূল প্রস্থের কিছু% দেয় বলে মনে হয় , তারপর স্কেল করে না, যেখানে widthতার পিতামাতার সাথে স্কেল হয়। আমি মনে করি এটি আপনি যা চান তা করবে (তবে আমি ভুল বুঝে থাকতে পারি)। আপনার আরও জটিল ফিডলে, বাম কলামে ক্ষেত্রগুলিকে%-প্রস্থ এবং একটি মিনিট পিক্সেল-প্রস্থ দেওয়ার চেষ্টা করুন। তারপরে ক্ষেত্রগুলি ডান 100 - (বাম ক্ষেত্র -% - প্রস্থ)% প্রস্থে দিন।

— ট্রোজান

আমার সবেমাত্র আরেকটি চিন্তাভাবনা ছিল: আপনি যদি ফিল্ডসেটের ন্যূনতম প্রস্থকে 0 তে সেট করেন? এটি নিজেই সম্ভবত সমস্যার সমাধান করবে না, তবে সম্ভবত কাজ করার চেষ্টা করার মতো মূল্য রয়েছে। আমি এখন ভিন্ন পথে কাজ করছি, তবে এটি যদি কাজ না করে তবে আমিও এটি চেষ্টা করব

— ট্রোজান

একই লাইনে থাকার জন্য আপনার কি লেবেল এবং ক্ষেত্রের প্রয়োজন? ছোট ভিউপোর্টের জন্য তারা ওভারল্যাপ করে। কেন এটিকে কিছুটা প্রতিক্রিয়াশীল করবেন না এবং প্রয়োজনে একটি নতুন লাইনে ব্রেক করুন?

— ট্রোজান

সম্পর্কিত প্রশ্ন: কীভাবে নির্বাচিত উপাদানগুলি ফিল্ডসেটের মধ্যে সর্বাধিক প্রস্থের শতাংশের শৈলীতে সঙ্কুচিত করা যায়

— ররি ও'কেন

Answer 1

আপডেট (25 সেপ্টেম্বর 2017)

ফায়ারফক্স বাগ নীচে বর্ণিত ফায়ারফক্স 53 এর হিসাবে সংশোধন করা হয়েছে এবং এই উত্তর লিংক পরিশেষে হয়েছে বুটস্ট্র্যাপ এর ডকুমেন্টেশন থেকে সরানো ।

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

ঠিক করা

ওয়েবকিট এবং ফায়ারফক্স min-width: 0;৫৩++ এ আপনি কেবলমাত্র ডিফল্ট মানটিকে ওভাররাইড করার জন্য ফিল্ডসেটে সেট করেছেনmin-content ¹

তবুও, ফিল্ডসেটগুলির ক্ষেত্রে ফায়ারফক্সটি কিছুটা অদ্ভুত ... পূর্ববর্তী সংস্করণগুলিতে এই কাজটি করতে, আপনাকে অবশ্যই displayফিল্ডসেটের সম্পত্তিটি নিম্নলিখিত মানগুলির মধ্যে একটিতে পরিবর্তন করতে হবে :

• table-cell (প্রস্তাবিত)
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

এর মধ্যে আমি প্রস্তাব দিই table-cell । উভয় table-rowএবং table-row-groupআপনাকে প্রস্থ পরিবর্তন করার সময়, যখন table-columnএবংtable-column-group বিরত রাখতে হবে উচ্চতা পরিবর্তন করতে আপনাকে বাধা দেয়।

এটি (কিছুটা যুক্তিসঙ্গতভাবে) আই-তে রেন্ডারিং ভেঙে দেবে। যেহেতু শুধুমাত্র গেকোর এটির প্রয়োজন, আপনি ন্যায়সঙ্গতভাবে @-moz-documentএকটির ব্যবহার করতে পারেন এটির মোজিলার মালিকানাধীন সিএসএস এক্সটেনশনের মধ্যে অন্য ব্রাউজারগুলি থেকে এটি আড়াল করতে:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(এখানে একটি জেএসফিডাল ডেমো )

---

এটি জিনিসগুলিকে সংশোধন করে, তবে আপনি যদি আমার মতো কিছু হন তবে আপনার প্রতিক্রিয়া এমন কিছু ছিল ...

কি.

সেখানে হয় একটি কারণ, কিন্তু এটা প্রশংসনীয় নয়।

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

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

তবে অভ্যন্তরীণ সারণী উপাদানগুলি গেকোতে একটি বিশেষ ফ্রেমের ধরণ গঠন করে । এই displayমান সেট সহ উপাদানগুলির জন্য মাত্রিক সীমাবদ্ধতাগুলি একটি পৃথক কোড পাথে গণনা করা হয় সেটগুলির , পুরোপুরি ফিল্ডসেটগুলিতে আরোপিত প্রয়োগ করা সর্বনিম্ন প্রস্থকে পরিবেষ্টন করে।

আবার এই জন্য বাগ এটির ফায়ারফক্স 53 হিসাবে ঠিক করা হয়েছে, সুতরাং আপনি যদি কেবল নতুন সংস্করণগুলি লক্ষ্য করে থাকেন তবে আপনার এই হ্যাকের প্রয়োজন হবে না।

@-moz-documentনিরাপদ ব্যবহার করছেন ?

এই এক ইস্যুর জন্য, হ্যাঁ @-moz-documentফায়ারফক্সের সমস্ত সংস্করণ হিসাবে 53 পর্যন্ত আপ হিসাবে চিহ্নিত কাজ করে, যেখানে এই বাগটি ঠিক করা হয়েছে।

এটি কোনও দুর্ঘটনা নয়। এই উত্তরের অংশ হিসাবে, বাগ / ব্যবহারকারী / ইউএ স্টাইলশীটগুলিতে সীমাবদ্ধ@-moz-document বাগটি অন্তর্নিহিত ফিল্ডসেট বাগটি প্রথমে ঠিক করার উপর নির্ভর করে।

এর বাইরে, আপনার সিএসএসে ফায়ারফক্সকে লক্ষ্য করতে ব্যবহার করবেন না@-moz-document , অন্যান্য সংস্থান সত্ত্বেও ³

---

¹ মান উপসর্গীকৃত হতে পারে। একজন পাঠকের মতে এটি অ্যান্ড্রয়েড ৪.১.২ স্টক ব্রাউজারে এবং সম্ভবত অন্যান্য পুরানো সংস্করণে কোনও প্রভাব ফেলবে না; এটি যাচাই করার জন্য আমার হাতে সময় নেই।

Answer এই উত্তরে গেকো উত্সের সমস্ত লিঙ্কগুলি 2965 জুলাই ২০১ committed প্রতিশ্রুতিবদ্ধ 5065fdc12408 পরিবর্তনটি উল্লেখ করে ; আপনি মোজিলা সেন্ট্রাল থেকে সাম্প্রতিক সংশোধনীর সাথে নোটগুলির তুলনা করতে চাইতে পারেন ।

Eg উদাহরণস্বরূপ দেখুন # 953491: সিএসএস এবং সিএসএস ট্রিকসের সাহায্যে কেবল ফায়ারফক্সকে লক্ষ্যবস্তু করা: হাই-প্রোফাইল সাইটগুলিতে ব্যাপকভাবে রেফারেন্স করা নিবন্ধগুলির জন্য ফায়ারফক্সকে লক্ষ্য করে সিএসএস হ্যাক করে ।

Comments

আমি সবেমাত্র লক্ষ্য করেছি যে ফাইসটি আই-তে ভেঙে গেছে, কেবলমাত্র এখানে এসে এটি সন্ধানের জন্য ইতিমধ্যে আপনি সম্পাদনা করেছেন তা জানতে find ধন্যবাদ! গেকো হ্যাক সমাধান প্রতিটি ব্রাউজারে আমার জন্য ভাল কাজ করে।

— ররি ও'কেনে

এই সমস্যাটিতে আমার চুলগুলি টানছিল, তবে আপনার ফিক্সটি সঠিক - এটি কেবল ফায়ার ফক্সে কাজ করে বলে মনে হচ্ছে। অন্যান্য ব্রাউজারগুলির জন্য কোনও পরামর্শ, বিশেষত মোবাইল ব্রাউজারগুলি? মোবাইল ডিভাইসগুলিতে ওরিয়েন্টেশন পরিবর্তনের কারণে আমার সবচেয়ে বড় সমস্যাটি পুনরায় আকার দিচ্ছে ...

— অ্যাড্রিয়ায়ান নেল

এটি একেবারে দুর্দান্ত উত্তর - সম্পূর্ণ, গবেষণা এবং সংক্ষিপ্ত। ধন্যবাদ।

— iamkeir

অবশ্যই এটি একেবারে দুর্দান্ত উত্তর! বুটস্ট্র্যাপের অফিসিয়াল ডকুমেন্টেশনগুলি এখানে উল্লেখ করেছে

— রানহিরু জুড কুরাই

ঠিক আছে, ফিল্ডসেট সম্পর্কে আমি কখনই জানতাম না। আমি আজ এখানে কিছু শিখেছি।

— superluminary

Answer 2

নির্বাচিত উত্তর সহ আইওএস ইস্যুতে সাফারি

আমি জর্ডান গ্রে থেকে উত্তরটি বিশেষভাবে সহায়ক বলে খুঁজে পেয়েছি। তবে আমার কাছে সাফারি আইওএস এ এই সমস্যাটি সমাধান হবে বলে মনে হয় না।

আমার জন্য সমস্যাটি কেবল এটিই যে ফিল্ডসেটটিতে অটোর প্রস্থ থাকতে পারে না যদি এর মধ্যে উপাদানটির মধ্যে একটি প্রস্থের সর্বোচ্চ প্রস্থ থাকে%

ইস্যুটির জন্য ঠিক করুন

কেবলমাত্র এটির ধারকটির 100% প্রস্থের ক্ষেত্রে ফিল্ডসেটটি সেট করা এই সমস্যাটিকে দেখে মনে হচ্ছে।

উদাহরণ

fieldset {
    min-width: 0; 
    width: 100%; 
}

কাজের উদাহরণগুলির জন্য নীচের অংশটি উল্লেখ করুন - আপনি যদি ক্ষেত্রসেট থেকে% প্রস্থ সরিয়ে ফেলেন বা এটিকে স্বয়ংক্রিয়ভাবে প্রতিস্থাপন করেন, এটি কাজ করতে থাকবে না।

জেএসফিডাল | Codepen

Comments

এটি সাধারণ সমস্যায় একটি দুর্দান্ত সংযোজন, আমি এটি iOS এ পরীক্ষার জন্য ভাবি নি। :) আমি প্রায় মনে করি এটি একটি নতুন প্রশ্ন হিসাবে আপনার জিজ্ঞাসা এবং স্ব-উত্তর দেওয়াও উপযুক্ত। আমি এই সপ্তাহে কিছু অতিরিক্ত পরীক্ষা করার চেষ্টা করব এবং যদি এটি কাজ করে তবে এই উত্তরের সাথে লিঙ্ক করব।

— জর্ডান গ্রে

Answer 3

আমি এটি নিয়ে বেশ কয়েক ঘন্টা সংগ্রাম করেছি এবং মূলত, ব্রাউজারটি এমন গণনা করা স্টাইলিং প্রয়োগ করছে যা আপনার সিএসএসে আপনার ওভাররাইড করতে হবে। আমি fieldsetউপাদানগুলি বনাম divএর (সম্ভবত min-width?) উপর সেট করা সঠিক সম্পত্তিটি ভুলে গেছি ।

আমার সেরা পরামর্শটি হ'ল আপনার উপাদানটিকে divএকটিতে পরিবর্তন করা, আপনার পরিদর্শকের কাছ থেকে গণিত শৈলীগুলি অনুলিপি করা, তারপরে আপনার উপাদানটিকে আবার পরিবর্তন করা fieldsetএবং অপরাধীর সন্ধানের জন্য গণিত শৈলীর তুলনা করা।

আশা করি এইটি কাজ করবে.

আপডেট: যোগ করা display: table-cellক্রোমবিহীন ব্রাউজারগুলিতে সহায়তা করে।

Comments

আমি প্রতিটি সিএসএস সম্পত্তি তুলনায় fieldsetএবং divউপর এই পৃষ্ঠার ফায়ারবাগকে হবে। এটি সাহায্য করেনি। ফায়ারবগে, বিভিন্ন মান সহ একমাত্র বৈশিষ্ট্য ছিল widthএবং perspective-origin। widthসংখ্যাসূচকভাবে ভিন্ন ছিল, কিন্তু fieldsetএর widthছিলauto , মত div'র। এবং এটি perspective-originহ'ল একটি ফাংশন width- এটির 50% ডিফল্টরূপে।

— ররি ও'কেনে

তবে তুলনাটি ক্রোম ওয়েব ইন্সপেক্টরকে এক উপায়ে সহায়তা করেছিল। আমার উদাহরণটি খোলার ঠিক পরে আমি খুঁজে পেয়েছি যে এটি ক্রোমে কাজ করছে! আমি ক্রোমে পরীক্ষার পরেmin-width: 0; আমার উদাহরণটিতে এটিকে যুক্ত করেছিলাম তবে ক্রোমে সমস্যাটি সমাধান হয়েছে বলে মনে হয়। ওয়েব ইন্সপেক্টর আমাকে বলে যে ক্রোমের স্টাইল রয়েছে ঠিক যেমনটি আমি অনুমান করেছিলাম। সুতরাং এখন আমার কেবল ফায়ারফক্সে সমস্যা সমাধান করা দরকার এবং সম্ভবত অন্যান্য ব্রাউজারগুলি আমি এখনও পরীক্ষা করে দেখিনি। min-width: -webkit-min-content;

— ররি ও'কেনে

খুশি এটা একটু সাহায্য। আমি অন্যান্য ব্রাউজারগুলিতে "ডিসপ্লে: টেবিল-সেল" দিয়ে আমার সমস্যাটি সমাধান করতে সক্ষম হয়েছি। আমি মনে করি না যে এটি সর্বোত্তম সমাধান নয়, তবে আশা করি এটি আপনার পক্ষে কার্যকর।

— পিএইচডিজে

Answer 4

.fake-select { white-space:nowrap; }ফিল্ডসেটটি .fake-selectবাধ্যতামূলক প্রস্থের পরিবর্তে (ওভারফ্লো লুকিয়ে থাকলেও) তার মূল প্রস্থের সাহায্যে উপাদানটির ব্যাখ্যা করতে পারে।

এই নিয়মটি সরান, এবং .fake-selectএর max-width:100%ন্যায়বিচার width:100%এবং সমস্ত কিছু ফিট করে। সতর্কবাণীটি হ'ল আপনি জাল-নির্বাচনের সমস্ত সামগ্রী দেখতে পাচ্ছেন, তবে আমি মনে করি না যে এটি এতটা খারাপ, এবং এটি এখন অনুভূমিকভাবে ফিট করে।

আপডেট: নিম্নলিখিত নিয়ম মেনে চলার নিয়মগুলি (যা কেবলমাত্র আসল নির্বাচনগুলি সহ) সহ ফিল্ডসেটের বাচ্চাদের প্রশস্ততা সঠিক করতে বাধ্য হয় ra জন্য নিয়ম সরানোর ছাড়া .fake-selectএবং মন্তব্য ফিক্সিং (থেকে // commentথেকে /* comment */, আমি বেহালার এর CSS এর পরিবর্তন লক্ষনীয় গেছেন।

আমি এখন আপনার সমস্যাটি আরও ভাল করে বুঝতে পারছি, এবং ঝাঁকুনিটি কিছু অগ্রগতির প্রতিফলন ঘটায়। আমি সকলের জন্য ডিফল্ট নিয়ম স্থির করে দিয়েছি <select>এবং .xxlargeআপনারা যা জানেন তাদের পক্ষে সংরক্ষণ করুন 480px এর চেয়ে আরও প্রশস্ত হবে (এবং এটি কেবলমাত্র কাজ করে কারণ আপনি প্রস্থ জানেন#viewport , এবং ম্যানুয়ালি ক্লাসটি খুব বিস্তৃততে যুক্ত করতে পারেন Just মাত্র কিছুটা পরীক্ষার প্রয়োজন )

প্রমাণ

Comments

আপনি যে কোনও ফিক্স ব্যবহার করেন তা বাস্তবের সাথে কাজ করতে হয় <select>। আসল সাইটটিতে কেবল <select>এস। বিন্দুটি fake-selectহ'ল একটি বিন্যাসের নিয়মগুলি <select>আসলে হ'ল না হয়ে <select>কেবল এটি দেখানোর জন্য যে এই আচরণটি কোনও ব্রাউজার বাগ নয় যা কেবলমাত্র <select>উপাদানগুলির সাথে ঘটে । সুতরাং শৈলীর পরিবর্তনকে উদ্দেশ্য হিসাবে পরাস্ত করার .fake-selectমতো কম করা <select>।

— ররি ও'কেনে

আমি .fake-selectবক্সটি প্রতিস্থাপনের জন্য <select>(ইতিমধ্যে উপস্থিত ব্যক্তির অনুরূপ) দিয়ে প্রতিস্থাপন করেছি । উপাদানগুলি সমস্ত পিতামাতার প্রস্থে সীমাবদ্ধ (আপনি যখন এটিতে ক্লিক করবেন তখন বিকল্পগুলি বাদ দিয়ে যা প্রতিটি একক লাইনে প্রদর্শিত হয় - তবে আমি মনে করি না আপনি এটি নিয়ন্ত্রণ করতে পারবেন)। আমি এর জন্য সমস্ত বিধিও সরিয়েছি .fake-select। বর্তমানের ঝাঁঝরিটি আপনার যা প্রয়োজন তা করে?

— ট্রোজান

এটা না. width: 100%পৃষ্ঠায় দীর্ঘ মেনুগুলির সাথে কাজ করে তবে সংক্ষিপ্ত মেনুগুলির সাথে সঠিকভাবে কাজ করে না। এটি পৃষ্ঠার সম্পূর্ণ প্রস্থে সংক্ষিপ্ত মেনুগুলি প্রসারিত করে তবে আমি সংক্ষিপ্ত মেনুগুলি তাদের সংক্ষিপ্ত প্রস্থকে রাখতে চাই। ঘর থাকলে মেনুগুলি তাদের প্রাকৃতিক প্রস্থ হওয়া উচিত তবে তারা যদি তাদের পিতামাতার পক্ষে খুব বড় হয় তবে 100% প্রস্থ। এটাই max-widthকরার কথা, তবে এক্ষেত্রে ব্যর্থ হওয়া।

— ররি ও'কেনে

"অল <select>এস" কে "লং <select>এস" থেকে আলাদা করে , এবং এখন ব্যাকগ্রাউন্ড প্রস্থে কাজ করে আমি আরও কিছু পরিবর্তন করেছি ।

— ট্রোজান

#viewportহয় একটি নির্দিষ্ট প্রস্থ নেই। এই কারণেই আমি পৃষ্ঠায় পুনরায় আকার দর্শন বন্দরের বোতামটি রেখেছি - যাতে আপনি পরীক্ষা করে দেখতে পারেন যে ভিউপোর্টের প্রস্থ যাই হোক না কেন সবকিছুই কাজ করে। যেমন .fake-selectবাস্তবের <select>পরীক্ষার জন্য বিকল্প, তেমনি #viewportএকটি বাস্তব ভিউপোর্টের বিকল্প। (একটি "ভিউপোর্ট" মূলত ব্রাউজার উইন্ডো)। আমি #viewportপৃষ্ঠাটিতে অন্তর্ভুক্ত করেছি যাতে আপনি সহজে দেখার উপাদানগুলিকে দেখতে স্ক্রোল না করে ভিউপোর্টের বাইরে থাকা থেকে সহজেই দেখতে পান।

— ররি ও'কেনে