Семантический пользовательский интерфейс — текстовая область внутри ‹td› с другим форматом

Я использую Semantic для стилизации проекта, и мне нужно вставить в поле из таблицы текстовое поле, но стиль из текстового поля, похоже, не соблюдается, это выглядит некрасиво.

В таблице я также использую некоторые другие семантические объекты, но они не были затронуты, выглядят так, как должны.

Вот изображение того, как это выглядит:

введите здесь описание изображения Как видите, текстовая область выглядит не так, как должна. Но остальные вещи выглядят нормально.

Вот код таблицы:

<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>

Мне не хватает класса для текстовой области? Семантические документы не показывают никакого класса для добавления для текстовой области...

Большое спасибо!


html css styles semantic-ui
person Fer Vargas    schedule 28.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, текстовое поле Semantic UI можно использовать только внутри элементов <div class='ui form'> или <Form>.

person yakunins    schedule 25.09.2018
comment
правильный ответ - должен был быть принят - person alex; 25.01.2021

arrow_upward
-1
arrow_downward

Возможно, вы переопределили css семантического пользовательского интерфейса своим собственным 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>

person Albert Israel    schedule 29.07.2016