Расширенная строка PrimeNg на всю ширину контейнера

У меня есть таблица PrimeNg с расширенной строкой для каждого элемента в таблице.

Развернутая строка должна содержать таблицу с данными

вот код шаблона.

<div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
<div class="col-12 text-right mb-2">
    <button class="btn btn-primary" (click)="createOrEditLandlordPropertyPortfolioModal.show()">
        <i class="fa fa-plus"></i> {{ l('Add') }}
    </button>
</div>
<p-table
    #dataTable
    (onLazyLoad)="getLandlordPropertyPortfolios($event)"
    [value]="primengTableHelper.records"
    rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
    [paginator]="false"
    [lazy]="true"
    dataKey="id"
    [scrollable]="true"
    ScrollWidth="100%"
    [responsive]="primengTableHelper.isResponsive"
    [resizableColumns]="primengTableHelper.resizableColumns"
>
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 20px"></th>
            <th style="width: 130px">
                {{ l('Actions') }}
            </th>
            <th style="width: 130px" pSortableColumn="id">
                {{ l('Id') }}
                <p-sortIcon field="id"></p-sortIcon>
            </th>
            <th style="width: 150px" pSortableColumn="name">
                {{ l('Name') }}
                <p-sortIcon field="name"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-record let-expanded="expanded">
        <tr>
            <td style="width: 10px">
                <a [pRowToggler]="record">
                    <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                </a>
            </td>
            <td
                style="width: 130px"
                [hidden]="
                    !isGrantedAny(
                        'Pages.LandlordPropertyPortfolios.Edit',
                        'Pages.LandlordPropertyPortfolios.Delete'
                    )
                "
            >
                <div class="btn-group dropdown" dropdown container="body">
                    <button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
                        <i class="fa fa-cog"></i><span class="caret"></span> {{ l('Actions') }}
                    </button>
                    <ul class="dropdown-menu" *dropdownMenu>
                        <li>
                            <a
                                href="javascript:;"
                                (click)="createOrEditLandlordPropertyPortfolioModal.show(record.id)"
                                >{{ l('Edit') }}</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;" (click)="deleteReasonModal.show(record)">{{ l('Delete') }}</a>
                        </li>
                    </ul>
                </div>
            </td>
            <td style="width: 130px">
                <span class="ui-column-title"> {{ l('Id') }}</span>
                {{ record.id }}
            </td>
            <td style="width: 150px">
                <span class="ui-column-title"> {{ l('Name') }}</span>
                {{ record.name }}
            </td>
        </tr>
    </ng-template>

    <!--Nested table for property portfolios-->
    <ng-template pTemplate="rowexpansion">
        <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
            <p-table
                #nestedTable
                [value]="primengTableHelper.records"
                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                [paginator]="false"
                [lazy]="true"
                dataKey="id"
                [scrollable]="true"
                ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
            >
                <ng-template pTemplate="header">
                    <tr>

                        <th style="width: 130px" pSortableColumn="id">
                            {{ l('PropertyAddress') }}
                            <p-sortIcon field="id"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('PostalCode') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('AgentName') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('Tenant') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('Status') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record let-expanded="expanded">
                    <tr>
                        <td style="width: 130px">
                            {{ record.properties.id}}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.postalCode }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.agentName }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.tenant }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.status }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </ng-template>
</p-table>

Моя проблема в том, что p-таблица в расширенной строке не имеет 100% ширины контейнера.

Вот как это выглядит

enter image description here

Как я могу сделать так, чтобы он соответствовал 100% ширине родительского контейнера?

Вы можете поместить этот пример в JSFiddle или любой другой, плз

becher henchiri 22.05.2019 14:39
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
1
4 104
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Встроенный стиль

Попробуйте добавить следующую встроенную привязку свойства CSS к вложенной таблице:

[tableStyle]="{'width.%': 100}"

Отдельный стиль

Или, если вы не предпочитаете встроенные стили, попробуйте добавить это в связанный файл css:

.expanded-table {
  width: 100%;
}

и класс во вложенную таблицу:

[tableStyleClass]="'expanded-table'"

Это не помогает :(

Eugene Sukh 23.05.2019 10:37

Вроде немного помогло. Рад, что вы смогли решить эту проблему с помощью colspan. :-)

Dale Harris 27.05.2019 23:31

Поскольку содержимое шаблона rowexpansion будет добавлено внутрь таблицы, вам необходимо добавить теги tr и td следующим образом:

<ng-template pTemplate="rowexpansion">
    <tr>
        <td [attr.colspan]="columns.length + 1">
            <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
                <p-table>
                ...
                </p-table>
            </div>
        </td>
    </tr>
</ng-template>
Ответ принят как подходящий

Я смог решить это так Использование атрибута colspan="4"

Вот код ответа

 <ng-template let-rowData pTemplate="rowexpansion" let-columns="columns">
        <tr>
            <td colspan="4">
                <p-table
                    #nestedTable
                    [value]="rowData.properties"
                    [tableStyle]="{ 'width.%': 100 }"
                    [scrollable]="true"
                    ScrollWidth="100%"
                >
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width: 130px" pSortableColumn="propertyAddress">
                                {{ l('PropertyAddress') }}
                                <p-sortIcon field="propertyAddress"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="postalCode">
                                {{ l('PostalCode') }}
                                <p-sortIcon field="postalCode"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="agentName">
                                {{ l('AgentName') }}
                                <p-sortIcon field="agentName"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="tenant">
                                {{ l('Tenant') }}
                                <p-sortIcon field="tenant"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="status">
                                {{ l('Status') }}
                                <p-sortIcon field="status"></p-sortIcon>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-record let-expanded="expanded">
                        <tr>
                            <td style="width: 130px">
                                {{ record.propertyAddress }}
                            </td>
                            <td style="width: 150px">
                                {{ record.postalCode }}
                            </td>
                            <td style="width: 150px">
                                {{ record.agentName }}
                            </td>
                            <td style="width: 150px">
                                {{ record.tenant }}
                            </td>
                            <td style="width: 150px">
                                {{ record.status }}
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </td>
        </tr>
    </ng-template>

Другие вопросы по теме