Comment puis-je empêcher la zone de texte de s'étendre au-delà de son élément DIV parent? (problème google-chrome uniquement)


100

Comment puis-je empêcher la zone de texte de s'étirer au-delà de son élément DIV parent?

J'ai cette zone de texte à l'intérieur d'une table qui se trouve à l'intérieur d'un DIV et il semble que la table entière s'étire hors de ses limites.

Vous pouvez voir un exemple de la même situation même dans un cas plus simple, en mettant simplement une zone de texte à l'intérieur d'un div (comme ce qui est utilisé ici sur www.stackoverflow.com)

Vous pouvez voir sur les images ci-dessous que la zone de texte peut s'étirer au-delà de la taille de son parent? Comment éviter cela?

Je suis un peu nouveau dans CSS donc je ne sais pas vraiment quels attributs CSS dois-je utiliser. J'ai essayé plusieurs comme l' affichage et le débordement . Mais ils ne semblent pas faire l'affaire. Y a-t-il autre chose que j'aurais pu manquer?

la section div

la zone de texte

MISE À JOUR: HTML

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} 

Si vous mettez ce code dans http://jsfiddle.net , vous verrez qu'ils agissent différemment. Bien que la zone de texte soit limitée au pourcentage déclaré dans son style css, il est toujours possible de l'amener à faire en sorte que sa table parente soit aussi grande qu'elle le souhaite, puis vous pouvez voir qu'elle déborde sur sa bordure parente. Des idées sur la façon de résoudre ce problème?


2
@Makoto - voir la date à laquelle cette question est publiée.
Itay Levin

Réponses:


171

Pour désactiver complètement le redimensionnement:

textarea {
    resize: none;
}

Pour autoriser uniquement le redimensionnement vertical:

textarea {
    resize: vertical;
}

Pour autoriser uniquement le redimensionnement horizontal:

textarea {
    resize: horizontal;
}

Ou vous pouvez limiter la taille:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

Pour limiter la taille à la largeur et / ou à la hauteur des parents:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

2
puis-je toujours garder l'étirement manuel disponible, simplement limiter les séjours d'étirement dans la limite de son élément parent?
Itay Levin

Est-ce un attribut CSS? ce n'est pas valide en css 2.1
Itay Levin

Oui, c'est un attribut CSS mais il ne validera pas. J'ai également mis à jour ma réponse.
Māris Kiseļovs

Je me demande si je pourrais le faire fonctionner aussi avec la largeur comme pourcentage et non avec un nombre fixe de pixels. parce que je veux permettre à l'utilisateur de redimensionner la zone de texte mais pas de décomposer la structure de l'écran.
Itay Levin

10
Définir la largeur maximale en pourcentage fonctionne bien - jsfiddle.net/paGE3 . Au fait, veuillez accepter ma réponse si cela fonctionne.
Māris Kiseļovs

19

Le contrôle de redimensionnement Textarea est disponible via la propriété de redimensionnement CSS3 :

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

Valeurs autorisées explicites: none(désactive le redimensionnement de la zone de texte) both, verticalet horizontal.

Notez que dans Chrome, Firefox et Safari, la valeur par défaut est both.

Si vous voulez limiter la largeur et la hauteur de l'élément textarea, ce n'est pas un problème: ces navigateurs respectent également max-height, max-width, min-heightet min-widthpropriétés CSS pour fournir le redimensionnement dans certaines proportions.

Exemple de code :

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}
<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>


3
Inspecté cette zone de commentaire que je suis en train de saisir S / O utilise resize:vertical:) Cela semble être la solution "correcte" si vous cherchez à redimensionner verticalement autant que vous le souhaitez!
mjohnsonengr

1

J'espère que vous avez le même problème que j'avais ... ma question était simple: Faire un textarea fixe avec des pourcentages verrouillés à l' intérieur du conteneur (je suis nouveau à CSS / JS / HTML, donc garder avec moi, si je n'obtenez pas le jargon correct) de sorte que quel que soit l'appareil sur lequel il s'affiche, la boîte remplissant le conteneur (la cellule du tableau) occupe la bonne quantité d'espace. Voici comment je l'ai résolu:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

Ensuite, CSS ressemble à ceci ...

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

Désolé pour le bloc de code bâclé ici, mais je devais vous montrer ce qui est important et je ne sais pas comment insérer du code CSS cité sur ce site. Dans tous les cas, pour vous assurer de bien voir de quoi je parle, le CSS important est moins en retrait ici ...

Ce que j'ai ensuite fait (comme indiqué ici), c'est de modifier très spécifiquement les pourcentages jusqu'à ce que je trouve ceux qui fonctionnaient parfaitement pour s'adapter à l'affichage, quel que soit l'écran de l'appareil utilisé.

Certes, je pense que le "redimensionner: aucun;" est exagéré, mais mieux vaut prévenir que guérir et maintenant, les consommateurs n'auront de toute façon pas à redimensionner la boîte, et peu importe le périphérique à partir duquel ils la visualisent.

Cela fonctionne très bien.


Votre HTML n'est pas formaté correctement. Le TR a besoin d'un TD.
KeyOfJ

0
textarea {
width: 700px;  
height: 100px;
resize: none; }

attribuez la largeur et la hauteur requises à la zone de texte, puis utilisez. redimensionner: aucun; css qui désactivera la propriété extensible de la zone de texte.


C'est la même chose que la réponse principale.
Lorenz Meyer
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.