セマンティックUI - 異なるフォーマットの​​内のテキストエリア

Question

私はプロジェクトのスタイリングにセマンティックを使用しています。テーブルからテキストエリアを挿入する必要がありますが、テキストエリアからのスタイリングは尊重されていないようです、それは醜いように見えます。

表では、他の意味オブジェクトも使用していますが、影響を受けていないように見えます。

Here's、それがどのように見えるかの画像：あなたが見ることができるようにそれが必要のよう

、テキストエリアがdoesn't見えます。しかし、他のものはうまく見えます。ここで

は、テーブルのコードです：

<table class = "ui celled stripped table"> 
     <thead> 
      <tr> 
       <th> 
        Nombre 
       </th> 
       <th> 
        Personalidad 
       </th> 
       <th> 
        Pide extensión 
       </th> 
       <th> 
        Contexto 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class = "collapsing"> 
        Nombre nombre apellido apellido 
       </td> 
       <td class = "collapsing"> 
        <div class = "ui multiple search selection dropdown" dropdown-search-personalities> 
         <input type = "hidden"> 
         <i class = "dropdown icon"></i> 
         <div class = "default text">Selecciona...</div> 
         <div class = "menu"> 

         </div> 
        </div> 
       </td> 
       <td class = "collapsing"> 
        <div class="ui fitted slider checkbox"> 
         <input type="checkbox"> <label></label> 
        </div> 
       </td> 
       <td class = "collapsing"> 
        <textarea></textarea> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

私はTextAreaのクラス足りませんか？セマンティックドキュメントは、テキストエリアに追加するクラスを表示しません。

ありがとうございます！

Answer 1

テキストエリア用に独自のCSSを使用してセマンティックUI CSSをオーバーロードした可能性があります。あなたがデフォルトのセマンティックファイルを使用するだけでは、奇妙に見えません。あなたのカスタムCSSファイルを確認してください。

$('.ui.dropdown').dropdown();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<table class = "ui celled stripped table"> 
 
     <thead> 
 
      <tr> 
 
       <th> 
 
        Nombre 
 
       </th> 
 
       <th> 
 
        Personalidad 
 
       </th> 
 
       <th> 
 
        Pide extensión 
 
       </th> 
 
       <th> 
 
        Contexto 
 
       </th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td class = "collapsing"> 
 
        Nombre nombre apellido apellido 
 
       </td> 
 
       <td class = "collapsing"> 
 
        <div class = "ui multiple search selection dropdown" dropdown-search-personalities> 
 
         <input type = "hidden"> 
 
         <i class = "dropdown icon"></i> 
 
         <div class = "default text">Selecciona...</div> 
 
         <div class = "menu"> 
 

 
         </div> 
 
        </div> 
 
       </td> 
 
       <td class = "collapsing"> 
 
        <div class="ui fitted slider checkbox"> 
 
         <input type="checkbox"> <label></label> 
 
        </div> 
 
       </td> 
 
       <td class = "collapsing"> 
 
        <textarea></textarea> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table>