textarea

[Светлана Г.]

Здравствуйте!

Есть такая задача: как сделать так, чтобы текст в поле не наезжал на <input> "Прикрепить файл"?

Все хорошо только в Мозилле:

Вот CSS:

textarea{
	height:70px;
	width:239px;
	resize:none;
	color:#333;
	padding:0 0 20px 4px;
	margin:0;
}

[wwt]

а html код где?

[Светлана Г.]

а html код где?

HTML-код простой:

<textarea></textarea>
<input type="file" class="file_1" />

остальное делается JS:

<input type="file" class="file_1" /> заменяется картинкой. Далее этот input с помощью стилей:

position: relative;

top:-18px;

left: 5px;

помещается в textarea.

Edited October 11, 2012 by Светлана Г.

[wwt]

firefox делает padding текста+скролов, а к примеру хром только текста. не замечал раньше что они отрабатывают по разному.хм...

[Светлана Г.]

Неужели нет никаких решений?

[wwt]

Это firefox так рисует элемент, он берет поля не вокруг контента поля, а вокруг контента и прокрутки если она есть. Во всех остальных браузерах рисуется одинаково. Заставить firefox рисовать так же как во всех остальных можно с помощью хака:

textarea {
    resize:none;
}
@-moz-document url-prefix() {
        textarea {
                padding: 0px;
                padding-left: 6px;
        }
}

Если вы наоборот хотите чтобы было как в Firefox во всех браузерах я даже не знаю что вам посоветовать. лучше обдумать этот вопрос и реализовать это все по другому.

ЗЫ На багтрекере мозиллы есть такой баг https://bugzilla.mozilla.org/show_bug.cgi?id=157846 как я понимаю его не пофиксили досихпор.

Можно сделать как то так http://jsfiddle.net/MUR67/ с помощью обертки

Edited October 11, 2012 by wwt

[Светлана Г.]

Нет, здесь дело не в отображении, а нужно сделать так, чтобы вводимый в textarea текст не перекрывал собою <input>. Текст пишется прямо поверх него, не замечая. Как раз в FF текст не перекрывает.

Edited October 11, 2012 by Светлана Г.

[wwt]

Нет, здесь дело не в отображении, а нужно сделать так, чтобы вводимый в textarea текст не перекрывал собою <input>. Текст пишется прямо поверх него, не замечая. Как раз в FF текст не перекрывает.

Именно по той причине которую я вам описал в FF и не происходит перекрытие, потому что паддинг делается не внутри области для ввода текста а вокруг нее, как будто ей задан margin.

Сейчас попробую обьяснить:

Во всех браузерах кроме FF, паддинг добавляется вокруг вводимого текста, скроллинг появляется в момент когда вводимый контент не вмещается в размеры.Но прокручивается он не до самого низа области ввода, а только до текущей строки. Паддинг после текста есть но чтобы его увидеть вам придется вручную прокрутить скролл вниз. А вот в FF паддинг добавляется вокруг области ввода, а не вокруг вводимого текста и потому выглядит это по разному. Вот наглядый пример http://jsfiddle.net/wwt999/tAEAU/.

Edited October 12, 2012 by wwt

[Светлана Г.]

Поняла, спасибо за разъяснения.

Видимо, придется искать другой способ верстки, чтобы обойти эту проблему?

[wwt]

Поняла, спасибо за разъяснения.

Видимо, придется искать другой способ верстки, чтобы обойти эту проблему?

я выше привел небольшой пример как можно действовать с помощью обертки http://jsfiddle.net/MUR67/

[Светлана Г.]

Поняла, спасибо за разъяснения.

Видимо, придется искать другой способ верстки, чтобы обойти эту проблему?

я выше привел небольшой пример как можно действовать с помощью обертки http://jsfiddle.net/MUR67/

Спасибо огромное за помощь, все получилось!

Единственное, у меня сомнение в необходимости этого правила:

textarea:focus {

outline:none;

}

[wwt]

Поняла, спасибо за разъяснения.

Видимо, придется искать другой способ верстки, чтобы обойти эту проблему?

я выше привел небольшой пример как можно действовать с помощью обертки http://jsfiddle.net/MUR67/

Спасибо огромное за помощь, все получилось!

Единственное, у меня сомнение в необходимости этого правила:

textarea:focus {

outline:none;

}

некоторые браузеры при фокусе на поле формы добавляют особое выделение полю:

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

если такое выделение всеже нужно, то лучше его сделать свое и одинаковое во всех браузерах.

Edited October 12, 2012 by wwt