Ajustement de forme TextArea

Question

Je travaille sur un projet où je veux que l'utilisateur sur un site Web puisse saisir du texte dans des cellules w3. J'utilise des cellules w3 car elles changent automatiquement de forme pour s'adapter à la page, mais j'ai des problèmes pour faire un textArea pour changer automatiquement de forme avec la mise en page.

Il me semble que le code HTML n'est même pas modifié par le CSS, mais je ne trouve aucun bogue dans mon code: /.

Remarque: Le CSS de textArea de ideaText fonctionne correctement; mon problème est avec les bodyCells.

HTML:

<div id="top"> 
    <div id="idea"> 
    <textArea id="ideaText" placeholder="Introduce your topic here..."> 
    </textArea> 
    </div> 
    <div id="body"> 
    <div class="w3-cell-row" id="bodyCells"> 
     <div id="evidence1" class="w3-container w3-red w3-cell"> 
     <textArea placeholder = "Write some stuff..."> 
     </textArea> 
     </div> 
     <div id="evidence2" class="w3-container w3-green w3-cell"> 
     <textArea></textArea> 
     </div> 
     <div id="evidence3" class="w3-container w3-yellow w3-cell"> 
     <textArea></textArea> 
     </div> 
     <div id="evidence4" class="w3-container w3-blue w3-cell"> 
     <textArea></textArea> 
     </div> 
     <div id="evidence5" class="w3-container w3-purple w3-cell"> 
     <textArea></textArea> 
     </div> 
    </div> 
    </div> 

CSS:

#idea{ 
    background: #b35900; 
    height: 150px; 
} 

textArea#ideaText{ 
    background: rgba(0,0,0,0.2); 
    width: 100%; 
    height: 150px; 
    font-size: 28px; 
} 

textArea#bodyCells{ 
    background: rgba(0,0,0,0.2); 
    width: 100%; 
    height: 150px; 
    font-size: 28px; 
} 

.w3-cell-row#bodyCells{ 
    height: 150px; 
} 

Answer 1

Vous avez mal sélecteur CSS, qui ne sont pas "attraper" les éléments HTML que vous voulez. Il n'y a pas de textArea#bodyCells dans votre code HTML. textArea#bodyCells recherche <textArea id="bodyCells">, qui n'existe pas dans votre vue. C'est pourquoi il semble que css ne fonctionne pas du tout pour cet élément. Btw, je vous conseille de n'utiliser que des classes (sans identifiants) dans les sélecteurs CSS. Les sélecteurs plus simples seront plus faciles à maintenir et à développer. :)

Answer 2

C'est juste une petite erreur dans l'ordre des sélecteurs. Qu'est-ce que vous avez saisi:

textArea#bodyCells{} 

ce qu'il devrait être:

#bodyCells textArea{} 

Here's your code travailler comme vous le voulez ... Je l'espère.

:)