Изменение размера Textarea на основе родительского Div - PullRequest
Новая
       24

Изменение размера Textarea на основе родительского Div

2 голосов
/ 06 апреля 2011

У меня есть код, как показано ниже, div можно перетаскивать и изменять его размер с помощью JQuery. Я хочу, чтобы внутренний текстовый текст автоматически изменял размер на основе измененного div. С кодом ниже он прекрасно работает для ширины, но не получает полную высоту div.

 <div class="dragDiv" id="dragDiv">   <textarea  style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 1px;color: white;" id="Text" name="Text"></textarea>
        <br/><input type="submit" value="Mark" onclick="MarkImage()" />
    </div>

Ответы [ 3 ]

4 голосов
/ 06 апреля 2011

Все, что ниже div с изменяемым размером jQuery, должно иметь высоту, установленную на -something- в CSS (или абсолютное позиционирование с верхом и низом, оба установлены). e.g.:

<div class="Resizable">
    <div style="height:100%">
        <div style="height:100%">
            <textarea></textarea>
        </div>
     </div>
 </div>

быстрое демо: http://jsfiddle.net/cwolves/KkNRb/

2 голосов
/ 06 апреля 2011

высота: 100% работает только в том случае, если родительский элемент имеет фиксированную высоту, определенную в стиле или CSS.

Здесь вам необходимо рассчитать высоту с помощью сценариев и обновить ее при изменении размера родительского элемента.

0 голосов
/ 05 сентября 2013

Вы можете использовать атрибут tooResize из JQueryUI , изменяемого размера .В моем случае следующий код работал отлично: 

var box=$('#dragDiv');
box.resizable({alsoResize: box.find('textarea').css('resize', 'none'),
               minHeight: '200',
               minWidth: '400'});

Также я отключил встроенное в браузер изменение размера texarea, чтобы предотвратить его выход из родительского div.

...