Растягивание textarea в div в IE при наборе текста

[VVVas]

Вообщем есть одна такая трабла, либо моя кривизна рук.

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

Код: Выделить всё

<textarea rows="10" name="message" width="100%" style="width:100%;max-width:100%;"></textarea>

Параметры div

Код: Выделить всё

div.left
	{
	margin-top: 110px;
	padding: 10px;
	margin-right: 330px;
	}

Пример можно глянуть в любой теме у меня на форуме.

В итоге вопрос: как победить растягивание textarea в IE когда начинаешь в ней печатать?
В таблицу засовывать не хочу.

[avm]

Так ведь там

Код: Выделить всё

<textarea rows="10" name="message" width="100%" style="width:100%;max-width:100%;font-size: 100%;"></textarea>

max-width:100% и font-size:100% нужно убрать

[AlexWB]

VVVas
и width задавать не в % а символах
к примеру так:
<textarea rows="10" name="message" width="60"></textarea>

[avm]

AlexWB, без указания единицы измерения у блочных (не текстовых) объектов по умолчанию пиксели (px). А то что вы имели ввиду у textarea указывается как COLS=n
А про размер в % он же сказал - "надо растянуть на весь div", так что все у него правильно (его width="100%" сработает при отключении стиля станицы в Опере, например)

[AlexWB]

avm
действительно, div я упустил
сори

[VVVas]

avm

max-width:100% и font-size:100% нужно убрать

Эх... Не помогает. В любом случае при указании width:100% или width=100% или оба растягивается на 100% окна. То есть если есть элемент который растягивает на 200%, то эта textarea растянется на 100%.
Сейчас стоит так.

Код: Выделить всё

<textarea rows="10" name="message" width="100%" style="width:100%;font-size: 100%;"></textarea>

font-size: 100%; пробовал убирать - тот же эффект, а так он мне нужен что бы размер шрифта не уменьшался в textarea.

AlexWB
В px то конечно можно задать и это не проблема, но я хочу движущийся дизайн.

[avm]

растягивается на 100% окна.

это потому что "родительский" div (тот что class=postbody) не имеет своего явного указания ширины, вот его и растягивают дочерние объекты на ширину BODY.
Т.е. весь абзац должен выглядеть примерно так

Код: Выделить всё

<div class="postbody" width="100%" style="width:100%">
    <div class="postbodyleft">
    <form action="posting.php?mode=reply&t=312" method="post" style="margin:0px">
          <b>Имя</b>
          <input type="text" name="username" size="15" maxlength="25" />
    </div>
    <textarea rows="10" name="message" width="100%" style="width:100%;font-size:12pt;"></textarea>
     </form>
</div>

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

Это несомненно косяк, но если подумать также как думает броузер - весьма предсказуемый....

P.S. font-size в случае textarea, имхо, лучше указывать в pt.

[VVVas]

avm
Уже лучше, но не совсем. В этом случае textarea берет 100% <div class="postbody" width="100%" style="width:100%"> и растягивает, но уже меньше, но в опере тоже растягивает.

Сделал тогда так

Код: Выделить всё

<div class="postbody">
	<div class="postbodyleft"><form action="posting.php?mode=reply&t=2125" method="post" style="margin:0px">
            <b>Имя</b>
	    <input type="text" name="username" size="15" maxlength="25" />
	</div>
	<div width="100%" style="width:100%">
            <textarea rows="10" name="message" width="100%" style="width:100%;font-size: 100%;"></textarea>
	 </div>
	</form>
</div>

Тогда сами видите как получаеться в ИЕ.

На днях ещё подумаю. Вот придумать такую конструкцию, которая будет выражать style="width:100%-330px" понятную браузеру было бы замечательно.

Это несомненно косяк, но если подумать также как думает броузер - весьма предсказуемый...

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

[avm]

придумать такую конструкцию, которая будет выражать style="width:100%-330px"

где-то так:

Код: Выделить всё

<div style="width:100%;padding-left:330px">
    <textarea style="width:100%"></textarea>
</div>

P.S. заодно поздравляю с днем рождений...

[VVVas]

avm
Точно. Торможу.

Сейчас проверим.

PS Спасибо за поздравление.

[alexenin]

Сегодня смастерил простенькин расширитель окна с помощью кнопок, уж очень не удобно в маленьком окошке вводить большие тексты. Может кому еще сгодится:

Код: Выделить всё

# 
#-----[ OPEN ]------------------------------------------ 
# 
posting_body.tpl 
# 
#-----[ FIND ] line 228------------------------------------------ 
#
function storeCaret(textEl) {
        if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

#-----[ AFTER, ADD ]------------------------------------------
#
var default_message_box_height;
default_message_box_height = 220;
function phpbb_msgbox_resize( pixels )
{
        var current_height = parseInt( document.post.message.style.height );
        current_height = current_height ? current_height : default_message_box_height;
        var new_height = current_height + pixels;
        document.post.message.style.height =  (new_height > 100) ? new_height + "px" : 100 + "px";
        return false;
}

# 
#-----[ FIND ] ------------------------------------------ 
#

 <textarea name="message" rows="15" cols="35" wrap="virtual" style="width:100%" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MESSAGE}</textarea>
                          </span></td>
# 
#-----[ IN-LINE FIND ]---------------------------------------------
#
                          </span></td>
# 
#-----[ REPLACE WITH ]---------------------------------------
# 
                          </span>
<input type="button" class="button" name="add_size_message" value=" + " onClick="phpbb_msgbox_resize(50)">
<input type="button" class="button" name="sub_size_message" value=" - " onClick="phpbb_msgbox_resize(-50)">
</td>

# 
#-----[ SAVE/CLOSE ALL FILES ]------------------------------------------ 
#

[Поручик]

alexenin
Прикольная штука. Для быстрого ответа тоже хороша.

[Xpert]

mesbox

Пардон что придираюсь, msgbox выглядит лучше

[alexenin]

Согласен с msgbox.

Подправил.