<div *ngFor="let field of fieldDefinitions" id="edit-form-element-{{field.name}}">
    <div *ngIf="field && (field.editable === true)" class="form-group card">
        <div class="card-header h4">
            <span class="card-title" *ngIf="field.label">{{field.label}}</span>
            <span class="card-title" *ngIf="!field.label">{{field.name}}</span>

            <span *ngIf="field.description" placement="left" container="body" ngbTooltip="{{field.description}}"
                  class="mdi mdi-information-outline float-right"></span>
        </div>

        <div class="card-block">
            <edit-form-field [resource]="document['resource']" [field]="field"></edit-form-field>
        </div>
    </div>
</div>

<ul class="list-group list-group-flush">

    <ng-template ngFor [ngForOf]="relationDefinitions" let-relationDefinition="$implicit">
        <li class="list-group-item">
            <label *ngIf="relationDefinition.label">{{relationDefinition.label}}</label>
            <label *ngIf="!relationDefinition.label">{{relationDefinition.name}}</label>

            <ul>
                <li style="list-style-type: none;">
                    <relation-picker-group [(document)]="document" [relationDefinition]="relationDefinition"
                                           [primary]="'identifier'"></relation-picker-group>
                </li>
            </ul>
        </li>
    </ng-template>
</ul>
<div *ngFor="let field of fieldDefinitions" id="edit-form-element-{{field.name}}">
    <div *ngIf="field && (field.editable === true)" class="form-group card">
        <div class="card-header h4">
            <span class="card-title" *ngIf="field.label">{{field.label}}</span>
            <span class="card-title" *ngIf="!field.label">{{field.name}}</span>

            <span *ngIf="field.description" placement="left" container="body" ngbTooltip="{{field.description}}"
                  class="mdi mdi-information-outline float-right"></span>
        </div>

        <div class="card-block">
            <edit-form-field [resource]="document['resource']" [field]="field"></edit-form-field>
        </div>
    </div>
</div>

<ul class="list-group list-group-flush">

    <ng-template ngFor [ngForOf]="relationDefinitions" let-relationDefinition="$implicit">
        <li class="card">
            <div class="card-header h4">
                <span class="card-title" *ngIf="relationDefinition.label">{{relationDefinition.label}}</span>
                <span class="card-title" *ngIf="!relationDefinition.label">{{relationDefinition.name}}</span>
            </div>

            <ul class="card-body">
                <li style="list-style-type: none;">
                    <relation-picker-group [(document)]="document" [relationDefinition]="relationDefinition"
                                           [primary]="'identifier'"></relation-picker-group>
                </li>
            </ul>
        </li>
    </ng-template>
</ul>
Improve relations styling in docedit
Improve relations styling in docedit
