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?
- Rejestracja:około 11 lat
- Ostatnio:około 11 lat
- Lokalizacja:Warszawa
- Postów:31
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.
- Rejestracja:ponad 18 lat
- Ostatnio:4 dni
- Lokalizacja:Rzeszów
3
@mszewcz @SzeWa (btw: podobne nicki macie)
jest jeszcze coś takiego jak box-sizing, co spowoduje, że element może mieć width: 100% i padding i nie będzie wychodził poza ramkę ;)
Racja, o tym zupełnie zapomniałem... Twoje rozwiązanie jest zdecydowanie najlepsze.
box-sizing obsługuje IE8+, niestety IE7 (wraz z XP) nadal trzyma spory kawałek rynku.
0,42%. Gigantyczny kawałek rynku. A skoro najnowsze IE jakie wspiera XP to IE8, a nie IE7 to bym się tym nie przejmował. Nikt nie umrze jak użytkownikowi ze starą przeglądarki wyjedzie kawałek boksa poza ramkę - użytkownicy IE7 raczej widzą takie rzeczy na codzień.
Nie wiem, skąd bierzesz te dane - ja patrzę na ruch na firmowych serwerach i widzę: IE - łącznie 17%, IE7 - 1.5% (czyli prawie 10% wszystkich IE), IE8 - 9.8%. Wszystkie pozostałe IE łącznie <6%. Półtora procenta niezadowolonych klientów to półtora procenta mniej przychodu, a w grę wchodzą miliony złotych.
ranking.pl, ze statystyk gemiusa, z polskiego interetu (są też dane z paru innych krajów europejskich)
calc()chyba załatwiłoby już wszystkie problemy)