Как я могу предотвратить textarea от растяжения за пределы его родительского элемента DIV? (только проблема google-chrome)

Как я могу предотвратить растягивание textarea за пределы родительского элемента DIV?



У меня есть эта текстовая область внутри таблицы, которая находится внутри DIV, и кажется, что она заставляет всю таблицу выходить за ее пределы.



вы можете увидеть пример той же ситуации даже в более простом случае, просто поместив текстовую область внутри div (например, то, что используется здесь www.stackoverflow.com)



вы можете видеть на изображениях ниже, что текстовая область может растягиваться за пределами размера его родителя? Как мне это предотвратить?



Я немного новичок в CSS, поэтому я действительно не знаю, какие атрибуты CSS я должен использовать. Я попробовал несколько, как display и переполнения.
Но они, кажется, не сделать трюк.
Что еще я мог упустить?



the div section



the text area



обновление:
HTML
















CSS



textarea {

    max-width: 50%;

}

#container {

    width: 80%;

    border: 1px solid red;

}    

#cont2{

    width: 60%;

    border: 1px solid blue;

} ​


Если вы помещаете этот код внутрь http://jsfiddle.net,
вы увидите, что они действуют по-разному. Хотя textarea ограничен процентом, объявленным в его стиле css, все еще можно заставить его заставить свою родительскую таблицу быть такой большой, как она хочет быть, и тогда вы можете видеть, что она переливается через свою родительскую границу.
Есть мысли о том, как это исправить?
​

671   4  

4 ответов:

чтобы полностью отключить изменение размера:

textarea {
    resize: none;
}

или вы можете ограничить размер:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

чтобы ограничить размер родительской ширины и / или высоты:

textarea {
    max-width: 100%; 
    max-height: 100%;
}
151  
2015-12-09 12:34:23

изменить размер textarea в управление через CSS3 resize property:

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

допустимые значения не требуют пояснений:none (отключает изменение размера текстовой области),both,vertical и horizontal.

обратите внимание, что в Chrome, Firefox и Safari по умолчанию both.

если вы хотите ограничить ширину и высоту элемента textarea, это не проблема: эти браузеры тоже уважаю max-height,max-width,min-height и min-width свойства CSS для обеспечения изменения размера в определенных пропорциях.

пример кода:

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}
<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>
16  
2017-03-28 12:19:41

Я надеюсь, что у вас возникли те же проблемы, что и я С... моя проблема была проста: сделайте фиксированную текстовую область с заблокированными процентами внутри контейнера (я новичок в CSS/JS/HTML, поэтому несите меня, если я не получаю правильный язык), чтобы независимо от устройства, на котором он отображается, поле, заполняющее контейнер (ячейка таблицы), занимает правильное количество места. Вот как я это решил:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

тогда CSS выглядит так...

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

извините за небрежный блок кода здесь, но я должен был показать вам, что важно, и я не знаю, как вставить цитируемый код CSS на этом сайте. В любом случае, чтобы убедиться, что вы видите, о чем я говорю, важный CSS здесь меньше отступов...

то, что я тогда сделал (как показано здесь), очень конкретно настраивает проценты, пока я не нашел те, которые идеально подходят для отображения, независимо от того, какой экран устройства используется.

конечно, я думаю, что "resize: none;" является излишним, но лучше безопасно, чем жаль, и теперь потребителям не придется в любом случае изменять размер коробки, и не будет иметь значения, с какого устройства они его просматривают.

Он отлично работает.

2  
2015-07-18 09:16:24 
textarea {
width: 700px;  
height: 100px;
resize: none; }

назначьте необходимую ширину и высоту для текстового поля, а затем используйте. изменение размера: нет ; css свойство, которое отключит растягиваемое свойство textarea.

1  
2015-02-01 11:48:18

Comments

    Ничего не найдено.
Click here to cancel reply.