web-dev-qa-db-fra.com

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)

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

J'ai ce texte dans une table qui est à l'intérieur d'une DIV et il semble que cela provoque l'étirement de la table entière.

Vous pouvez voir un exemple de la même situation, même dans un cas plus simple, il suffit de placer une zone de texte dans une div (comme ce qui est utilisé ici dans www.stackoverflow.com)

Vous pouvez voir à partir des images ci-dessous que la zone de texte peut s’étendre au-delà de la taille de son parent? Comment puis-je empêcher cela?

Je suis un peu novice en CSS, donc je ne sais pas vraiment quels attributs CSS devrais-je utiliser. J'ai essayé plusieurs comme afficher , et débordement . Mais ils ne semblent pas faire l'affaire. Quelque chose d'autre que j'ai pu manquer?

the div section

the text area

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’obtenir de manière à ce que sa table parent soit aussi volumineuse 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? Un séjour sans faille

cssgoogle-chrometextarea
93
Itay Levin

Pour désactiver complètement le redimensionnement:

textarea {
    resize: none;
}

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%;
}
157
Māris Kiseļovs

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

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

Les valeurs admises vont de soi: none (désactive le redimensionnement de la zone de texte), both, vertical et horizontal.

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

Si vous voulez contraindre 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-height, et min-width Propriétés CSS pour fournir un 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>
18
Yosvel Quintero

J'espère que vous rencontrez le même problème que je avait ... mon problème était simple: créer une zone de texte fixe avec des pourcentages verrouillés à l'intérieur du conteneur (je suis nouveau dans CSS/JS/HTML, alors supportez-moi, si je ne comprends pas bien le jargon) de sorte que, quel que soit le périphérique sur lequel il est affiché, 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>

Alors CSS ressemble à ça ...

#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. En tout cas, pour que vous sachiez de quoi je parle, l'important CSS est moins mis en retrait ici ...

Ce que j’ai alors fait (comme indiqué ici) c’est très précisément de modifier les pourcentages jusqu’à ce que j’ai trouvé ceux qui fonctionnaient parfaitement pour l’affichage, quel que soit l’écran du périphérique utilisé.

Certes, je pense que le "redimensionner: aucun;" C'est exagéré, mais mieux vaut prévenir que guérir et, à présent, les consommateurs n'auront plus à redimensionner la boîte, peu importe le périphérique à partir duquel ils la verront.

Cela fonctionne très bien.

2
Steven L
textarea {
width: 700px;  
height: 100px;
resize: none; }

attribuez la largeur et la hauteur requises à la zone de texte, puis utilisez-les. resize: none; Propriété css qui désactivera la propriété extensible de la zone de texte.

1
Siddhartha Chowdhury