100% ওভারফ্লো টেবিল ঘরগুলির প্রস্থ সহ এইচটিএমএল ইনপুট পাঠ্যবক্স

106

100% প্রস্থের ইনপুট উপাদানগুলি কেন টেবিলের ঘরগুলির সীমানা পেরিয়ে যায় কেন কেউ জানে।

ইনপুট বাক্সের নীচে থাকা সাধারণ উদাহরণে টেবিলের ঘরগুলির সীমানা পেরিয়ে যান, ফলাফলটি ভয়াবহ। এটি পরীক্ষা করা হয়েছিল এবং এটি একই পদ্ধতিতে ঘটে: ফায়ারফক্স, আই 7 এবং সাফারি।

এটা কি আপনার জন্য অর্থবোধ করে? আমি কি কিছু মিস করছি, আপনি কি কোনও সম্ভাব্য সমাধান সম্পর্কে জানেন?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html><head>    
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
   <title>Test input text in table</title>
   <style type="text/css">      
      table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
      table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
      input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */
   </style>    
</head><body>

<table cellpadding="0" cellspacing="0">
   <tr>
      <td><p>column one hello babe babe babe</p></td>
      <td><p>column two hello babe more</p></td>
      <td><p>column three hello babe more and more</p></td>
   </tr>
   <tr>
      <td><input type="text" value="test"></td>
      <td><input type="text" value="test"></td>
      <td><input type="text" value="test"></td>
   </tr>
</table>

</body></html>
html  input  html-table  width 
— মার্কো দেমাইও
সূত্র
1
আমি পরামর্শ দেব, আপনি যদি ইনপুট উপস্থাপনের জন্য কেবল একটি টেবিল ব্যবহার করেন তবে আপনি একটি বা এর formমধ্যে labelএস এবং inputএস দিয়ে একটি ব্যবহার করতে স্যুইচ করতে পারেন । যা অন্তত খানিকটা বেশি শব্দার্থক। অবশ্যই যদিও আপনি একটি ব্যবহার করা উচিত , এমনকি যদি আপনি এটির সাথে আটকে থাকেন । ulolformtable
— ডেভিড মনিকা

উত্তর:

216

আপনি box-sizingবহিরাগত প্যাডিং এবং সীমানা অন্তর্ভুক্ত করতে CSS3 বৈশিষ্ট্যটি ব্যবহার করতে পারেন :

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}
— pricco
সূত্র
1
দুঃখের সাথে বলতে গেলেও দুর্ভাগ্যবশত আই আই 7 বক্স সাইজ সঠিকভাবে মোকাবেলা করে না। আইই 7 তে নিম্নলিখিতটি চেষ্টা করুন ... css3.info/preview/box-sizing বা দেখুন CSS-tricks.com/box-sizing
— অ্যান্টনিভিও
@ অ্যান্টনিভিও: সত্য, আই আই <!--[if lt IE 8]>input[type="text"] {width:95%}
— একমাত্র কর্মসূচি হ'ল
24

প্রস্থের মানটি সীমানা বা প্যাডিংগুলিকে বিবেচনা করে না:

http://www.htmldog.com/reference/cssproperties/width/

আপনি প্রতিটি দিকে 2px প্যাডিং পাবেন, পাশাপাশি প্রতিটি পাশের 1px সীমানা পাবেন।
100% + 2 * (2px + 1px) = 100% + 6px, যা প্যারেন্ট টিডির 100% শিশু-সামগ্রীর চেয়ে বেশি।

আপনার কাছে বিকল্প রয়েছে:

  • হয় না হয় @ pricco এর উত্তরbox-sizing: border-box; অনুযায়ী সেটিং ;
  • বা 0 মার্জিন এবং প্যাডিং (অতিরিক্ত আকার এড়ানো) ব্যবহার করে।
— ANeves
সূত্র
Sr pts এর উত্তর আপনি প্যাডিং এবং বর্ডার 0px এ সেট করতে পারেন তবে 100% কাজ করা উচিত।
— মাউরো
আসলে, টিডির জন্য কোনও প্যাডিং সেট না করেও - খুব ভালভাবে যুক্ত।
— আনভিস
1
এছাড়াও, যদি প্যাডিংটি কোনও সমস্যা তৈরি করে text-indentতবে পাঠ্যের শীর্ষস্থানীয় প্রান্তের আগে প্যাডিং অনুকরণ করতে এবং line-heightউল্লম্ব প্যাডিংয়ের জন্য ব্যবহার করা সম্ভব (যদিও উল্লম্ব প্যাডিং বজায় রাখা প্রস্থটিকে কোনওভাবে প্রভাবিত করবে না)।
— ডেভিড বলছেন মনিকা
14

এই জাতীয় জিনিসগুলির সাথে সমস্যাটি width:95%;হ'ল তারা প্রশস্ত নমনীয় বিন্যাসগুলিতে সঠিক দেখাচ্ছে না (কারণ 5% তখন 30 পিক্সেলের মতো হতে পারে)।

নিম্নলিখিত সমাধানগুলি আমার জন্য খুব কার্যকরভাবে কাজ করে (ফায়ারফক্স, আই 9, সাফারি পরীক্ষিত):

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
</tr>
</table>

(সঠিক প্যাডিংটি লক্ষ্য করা সহজ করার জন্য রঙগুলি যুক্ত করা হয়েছে)

কৌশলটি হল দুটি ডিভ দিয়ে ইনপুটটি মোড়ানো, বাইরেরটির 3px মার্জিন থাকে (এটি এটি টিডি থেকে 3px ছোট করে তোলে), অভ্যন্তরের একটি 3px প্যাডিং রয়েছে। এটি ইনপুটটি 6px টিডি-র চেয়ে ছোট করে তোলে যা আপনি শুরু করতে চেয়েছিলেন।

আমি এর মেকানিক্স সম্পর্কে নিশ্চিত নই, তবে এটি কাজ করে।

এই সাধারণ উদাহরণে, এটি ডান মার্জিনের সাথে কেবল একটি একক ডিভের সাথেও কাজ করে However তবে আমার ওয়েব অ্যাপ্লিকেশনটির ক্ষেত্রে কেবল উপরের সমাধানটিই কাজ করে। 

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
</tr>
</table>
— আন্দ্রিয়াস
সূত্র
এটি কাজ করে (উপরে উন্নীত +1)। আশ্চর্যের বিষয় হল, আমি প্রতিটি <ইনপুট> এর আগে কিছু পাঠ্য সন্নিবেশ করিয়েছিলাম এবং সেগুলিকে একই লাইনে রাখতে "হোয়াইট-স্পেস: নরপ্যাপ" যুক্ত করেছি, তবে তিনটি <ইনপুট> টেবিলের ঘরগুলিকে উপচে ফেলেছি, যদি আমি "হোয়াইট-স্পেস: নরপ্যাপ" সমস্ত কিছু সরিয়ে ফেলি আবার কাজ করে। রহস্যময়।
— হোসে ম্যানুয়েল অ্যাবারকা রদ্রিগেজ
8

সমস্যাটি আগে ব্যাখ্যা করা হয়েছে সুতরাং আমি কেবল পুনরাবৃত্তি করব: প্রস্থটি সীমানা এবং প্যাডিং অ্যাকাউন্টে নেয় না। এটির আলোচিত নয়, তবে এর একটি সম্ভাব্য উত্তর যা আমাকে খুঁজে পেয়েছে তা হ'ল আপনার ইনপুটগুলি মোড়ানো। কোডটি এখানে, এবং আমি এটি ব্যাখ্যা করব যে এটি কীভাবে একটি সেকেন্ডে সহায়তা করে:

<table>
  <tr>
    <td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
  </tr>
</table>

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

আমি এটি Chrome এবং ফায়ার ফক্সে পরীক্ষা করেছি tested উভয়ই এই সমাধানটিকে ভালভাবে সম্মান করে বলে মনে হচ্ছে।

আপডেট : যেহেতু আমি সবেমাত্র একটি এলোমেলো ডাউনওট পেয়েছি, তাই আমি বলতে চাই যে প্রিকো দ্বারা বর্ণিত হিসাবে ওভারফ্লো মোকাবেলা করার একটি আরও ভাল উপায় CSS3 বক্স-সাইজিং বৈশিষ্ট্যটি রয়েছে:

.myinput {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

এটি প্রধান ব্রাউজারগুলির দ্বারা বেশ ভাল সমর্থিত বলে মনে হচ্ছে এবং ওভারফ্লো ট্রিকের মতো "হ্যাকি" নয়। তবে এই ব্রাউজারের সাথে বর্তমান ব্রাউজারগুলিতে কিছু ছোটখাটো সমস্যা রয়েছে (দেখুন http://caniuse.com/#search=box- আকারিত জ্ঞাত সমস্যাগুলি)।

— ডেভিড পিটারসন
সূত্র
3
একটি সংক্ষিপ্ত নোট: overflow: hidden;সামগ্রীর সাথে এখনও ঠিক একইভাবে বাক্সের বাইরের দিকে 'প্রবিষ্ট' হয়ে থাকে তবে এটি দেখানোর পরিবর্তে এটি কেটে ফেলা হয় - যাতে এটি অন্য সামগ্রীকে ওভারল্যাপ করে না।
— এনিভেস
2

আমি জানি যে এই প্রশ্নটি 3 বছরের পুরানো তবে সমস্যাটি বর্তমান ব্রাউজারগুলির জন্য এখনও অব্যাহত রয়েছে এবং লোকেরা এখনও এখানে আসছে। আপাতত সমাধানটি হ'ল ক্যালক () :

input {
    width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */
    width: -webkit-calc(100% - 12px); /*For safari 6.0*/
}

এটি বেশিরভাগ আধুনিক ব্রাউজার দ্বারা সমর্থিত।

— সাহসী যোদ্ধা
সূত্র
1

সমস্যাটি ইনপুট উপাদান বক্স মডেলের কারণে। মোবাইল ডিভাইসগুলির জন্য আমার ইনপুটকে 100% এ রাখার চেষ্টা করার সময় আমি সম্প্রতি সম্প্রতি সমস্যার একটি দুর্দান্ত সমাধান পেয়েছি।

আপনার ইনপুটটিকে অন্য একটি উপাদান দিয়ে মুড়ে দিন, উদাহরণস্বরূপ একটি ডিভ। তারপরে আপনার ইনপুটটির জন্য আপনার পছন্দসই স্টাইলিংটি সেই মোড়কের ডিভিতে প্রয়োগ করুন। উদাহরণ স্বরূপ:

<div class="input-wrapper">
 <input type="text" />
</div>

.input-wrapper {
    border-raius:5px;
    padding:10px;
}
.input-wrapper input[type=text] {
    width:100%;
    font-size:16px;
}

ইনপুট-মোড়কে গোলাকার কোণার প্যাডিং ইত্যাদি দিন, আপনি আপনার ইনপুটটির জন্য যা কিছু চান, তারপরে ইনপুট প্রস্থকে 100% দিন। আপনি আপনার ইনপুটটি সীমানা ইত্যাদি দিয়ে সুন্দরভাবে প্যাড করেছেন তবে বিরক্তিকর ওভারফ্লো ছাড়াই!

— hallodom
সূত্র
1

@ হলডমের উত্তর দিয়ে শুরু করে আমি এই সমস্যাটি সমাধান করেছি। আমার সমস্ত ইনপুটগুলি লি এর মধ্যে অন্তর্ভুক্ত ছিল, তাই আমার কেবলমাত্র লি ওভারফ্লো সেট করতে হয়েছিল: অতিরিক্ত অতিরিক্ত ইনপুট অপসারণের জন্য এটি লুকানো ছিল hidden

.ie7 form li {
  width:100%;
  overflow:hidden;
}

.ie7 input {
  width:100%;
}
— Chet
সূত্র
1

পরিবর্তে এই মার্জিন সংগ্রাম শুধু করতে

input{
    width:100%;
    background:transparent !important;
}

এইভাবে ঘরের সীমানা দৃশ্যমান এবং আপনি সারি পটভূমির রঙ নিয়ন্ত্রণ করতে পারেন

— bortunac
সূত্র
0

ডক্টইপিই ঘোষণা থেকে "http://www.w3.org/TR/html4/loose.dtd" নিন এবং এটি আপনার সমস্যার সমাধান করে।

চিয়ার্স! :)

— লুসিয়ান
সূত্র
আপনার কি http://www.w3.org/TR/html4/strict.dtdস্ট্রাইক ব্যবহারের অর্থ ? সুত্র। w3.org/QA/2002/04/ अवैध-dtd-list.html যাইহোক, ডক্টইইপি পরিবর্তন এখন কোনও বিকল্প নয় যা সম্ভবত ওয়েবপৃষ্ঠায় অন্যান্য অনেক স্টুফের রেন্ডারিংকে প্রভাবিত করবে।
— মার্কো দেমাইও
0

কিছু জাভাস্ক্রিপ্টের সাহায্যে আপনি টিডি থাকা সঠিক প্রস্থটি পেতে পারেন এবং তারপরে এটিকে সরাসরি ইনপুট উপাদানটিতে নির্ধারণ করতে পারেন।

নীচে কাঁচা জাভাস্ক্রিপ্ট তবে jQuery এটিকে আরও ক্লিনার করে তুলবে ...

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++)
{
    var el = inputs[i];
    if (el.style.width == '100%')
    {
        var pEl = el.parentNode;  // Assumes the parent node is the TD...
        el.style.width = pEl.offsetWidth;
    }
}

এই সমাধান সহ সমস্যাগুলি হ'ল:

1) যদি আপনার ইনপুটগুলি অন্য কোনও উপাদান যেমন স্প্যানের মধ্যে থাকে তবে আপনাকে লুপ আপ করতে হবে এবং টিডিটি খুঁজে পেতে হবে কারণ স্প্যানগুলির মতো উপাদানগুলি ইনপুটটি মোড়বে এবং তার আকারটি প্রদর্শন করবে তারপরে টিডি আকারের মধ্যে সীমাবদ্ধ থাকবে।

২) আপনার যদি বিভিন্ন স্তরে প্যাডিং বা মার্জিন যুক্ত হয় তবে আপনাকে স্পষ্টভাবে এটি [পিএল.অফসেটউইথ] থেকে বিয়োগ করতে হবে। আপনার HTML কাঠামোর উপর নির্ভর করে যা গণনা করা যায়।

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

var inputs = document.getElementsByTagName('input');
var newSizes = [];
for (var i = 0; i < inputs.length; i++)
{
    var el = inputs[i];
    if (el.style.width == '100%')
    {
        var pEl = el.parentNode;  // Assumes the parent node is the TD...
        newSizes.push( { el: el, width: pEl.offsetWidth });
    }
}

// Set the sizes AFTER to avoid stepping...
for (var i = 0; i < newSizes.length; i++)
{
    newSizes[i].el.style.width = newSizes[i].width;
}
— AnthonyVO
সূত্র
0

আমি আবেদন করে সমস্যার সমাধান করেছি box-sizing:border-box; ইনপুট এবং মোড়কের সাহায্যে একই কাজ করা ছাড়াও টেবিলের কক্ষগুলিতে নিজেই।

— Vanco
সূত্র
0

আমি এটি ব্যবহার করে সমস্যার সমাধান করেছি

tr td input[type=text] {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
  background:transparent !important;
  border: 0px;
}
— কেভিন মুছাওয়াত
সূত্র
-1

এটিকে ঠিক করতে আমি সাধারণত আমার ইনপুটগুলির প্রস্থটি 99% এ সেট করি:

input {
    width: 99%;
}

আপনি ডিফল্ট শৈলীগুলিও সরিয়ে ফেলতে পারেন, তবে এটি এটি কোনও পাঠ্য বাক্স বলে কম স্পষ্ট করে তুলবে। তবে আমি যেভাবেই হোক এর জন্য কোডটি দেখাব:

input {
    width: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

এ্যাড @ মি

— kirb
সূত্র
-2

সমস্যা border-widthইনপুট উপাদান অন্তর্ভুক্ত। শীঘ্রই, margin-leftইনপুট উপাদানটির সেটিংস সেট করার চেষ্টা করুন -2px।

table input {
  margin-left: -2px;
}
— বুর্ক পেকারিক
সূত্র
তাই মনে করবেন না। এটি কেবল বাক্সটি বামে স্থানান্তরিত করে এবং বাম মার্জিনটি ধ্বংস করে
— সিসি তরুণ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.