Witam, mam taki małe problem - robię formularz, który powinien być responsywny. O ile z polami typu input nie ma problemu to gorzej to wygląda z textarea. Czy jest możliwość, aby textarea skalowała się jakoś do diva w którym się znajduje ? Aktualnie przy zmniejszaniu ekranu textarea wychodzi poza div. Oczywiscie można to schować poprzez overflow:hidden, ale wtedy widac miejsca gdzie ucinane jest pole. Jakieś sugestie?
0
0
width: 100%
albo coś podobnego?
1
Przy ustawieniu width na 100% textarea będzie wystawać poza diva. Są trzy rozwiązania tego problemu:
a) ustawić padding-right dla nadrzędnego diva na ok. 6px (w zależności od paddingu i bordera ustawionego dla textarea):
<div style="border: solid 1px #000; padding-right: 6px"><textarea style="width: 100%"></textarea></div>
b) ustawić width dla textarea na 98%, ale to nie będzie wyglądało najlepiej:
<div style="border: solid 1px #000"><textarea style="width: 98%"></textarea></div>
c) napisać funkcję w JS, która przy zmianie szerokości okna zmieni szerokość textarea, coś na kształt:
HTML:
<div style="border: solid 1px #000"><textarea></textarea></div>
JS (jQuery):
$(document).ready(function() {
function resizeTextarea() {
$('textarea').each(function() {
$(this).css('width',$(this).parent().width() - 6);
});
}
$(window).off().on('resize',function() {
resizeTextarea();
});
resizeTextarea();
});
Odejmowane 6px (opcja c), tak jak i w przypadku prawego paddingu (opcja a) to sumaryczna wartość: padding-left + padding-right + border-left-width + border-right-width dla textarea.