語義用戶界面 -​​裏面有不同的格式

Question

語義用戶界面我使用語義爲項目的樣式，我需要從表中插入一個textarea字段，但從textarea的樣式似乎並沒有得到尊重，它看起來很醜。

在表中我還使用了一些其他語義對象，但它們沒有受到影響，看起來應該如此。

Here's的它的外觀圖片：

正如你所看到的，textarea的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的？語義文檔沒有顯示爲textarea添加的任何類...

非常感謝！

Answer 1

你可能已經用你自己的css覆蓋了語義UI css的textarea。如果您只使用默認的語義文件，這看起來不奇怪。檢查你的自定義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>