Как выровнять элементы p-таблицы и p-диаграммы бок о бок - PullRequest
Новая
       1

Как выровнять элементы p-таблицы и p-диаграммы бок о бок

0 голосов
/ 19 марта 2019

У меня очень мало опыта разработки пользовательского интерфейса, но я хотел быстро выполнить задачу, в которой я должен поместить элементы p-таблицы и p-диаграммы рядом друг с другом.Я пытался использовать гибкий макет, а также плавать влево и вправо, как показано ниже, но не получил ожидаемого результата.Как это можно исправить? 

  <div fxLayout="row" fxLayoutAlign="start center">
        <div fxFlex="50%" class="floatLeft">
            <p-table [value]="summaryList" [scrollable]="true" scrollHeight="200px"
                     [resizableColumns]="true" [style]="{width:'500px'}">
                <ng-template pTemplate="caption">
                    XXX Summary
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th *ngFor="let col of summaryColumns" [pSortableColumn]="col.field">
                            {{col.header}}
                            <p-sortIcon [field]="col.field"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-summaryList>
                    <tr>
                        <td *ngFor="let col of summaryColumns">
                            {{summaryList[col.field]}}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
        <div class="col-md-4 content-section implementation" fxFlex="50%" class="floatRight">
            <p-chart type="line" [data]="dailyData" title="XXX Chart" extender="overrideXAxis"></p-chart>
        </div>
    </div>

1 Ответ

0 голосов
/ 25 марта 2019

Вы можете попробовать сделать это. 

<div class="container">
		<p-table [value]="summaryList" height="200" [scrollable]="true" scrollHeight="100px" [resizableColumns]="true" [style]="{width:'50%', float:'left'} ">
			<ng-template pTemplate="caption">
				My Awesome Summary
			</ng-template>
			<ng-template pTemplate="header">
				<tr>
					<th *ngFor="let col of summaryColumns" [pSortableColumn]="col.field">
						{{col.header}}
						<p-sortIcon [field]="col.field"></p-sortIcon>
					</th>
				</tr>
			</ng-template>
			<ng-template pTemplate="body" let-summaryList>
				<tr>
					<td *ngFor="let col of summaryColumns">
						{{summaryList[col.field]}}
					</td>
				</tr>
			</ng-template>
		</p-table>
		<p-chart height="250" [responsive]="false" type="bar" [data]="data" [options]="options" [style]="{width:'48%', float:'right'}"></p-chart>
	</div>

затем добавьте стиль к вашему component.css 

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}
...