Расположение элемента в зависимости от ширины другого элемента - PullRequest
0 голосов
/ 14 февраля 2020

У меня есть элемент (кнопка), и я хочу расположить его под правым нижним углом текстовой области (есть также еще несколько элементов справа от текстовой области. Поскольку ширина этой текстовой области зависит от дисплея Размер, я хочу как-то установить левое поле этой кнопки в зависимости от ширины области текста. Это даже возможное решение? Я также использую Angular 9.

Я надеюсь, что кто-то может помогите мне.

Это html:

<div class="user-container">
<div class="editor">
    <h3>Berichte oder schreibe etwas über deinen Tag</h3>
    <ckeditor 
        [editor]="Editor" 
        [(ngModel)]="editorData" 
        (ready)="onReady($event)"></ckeditor>
</div>
<div class="date-picker">
    <h3>Wähle das Datum</h3>
    <mat-form-field>
        <mat-label>Wähle das Datum</mat-label>
        <input matInput (dateInput)="onDateChange($event.value)" [matDatepicker]="picker" [ngModel]="date" (click)="picker.open()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</div>
<app-emoji-rating-scale (emojiSelected)="onEmojiSelected($event)"></app-

emoji-rating-scale>
</div>
<button (click)="onSaveEntry(editorData)" mat-raised-button>Eintrag speichern</button>
<button class="calendar-button" routerLink="/calendar" mat-raised-button>Einträge anzeigen</button>

И это css (если это поможет):

h3 {
font-weight: 500;
}

.user-container {
    position: relative;
    height:75vh;
    max-height: 300px;
}

.editor {
    display: inline-block;
    width: 75%;
    height:70%;
}

.editor h3 {
    margin-right: 20px;
    vertical-align: top;
}

.date-picker {
    display: inline-block;
    position:absolute;
    top:0px;
    width: 20%;
    margin-left: 10px;
}

:host ::ng-deep .ck-editor__editable_inline {
    display: block;
    height:100%;
    border: 1px solid var(--ck-color-toolbar-border);
}

app-emoji-rating-scale {
    position: absolute;
    margin: 100px 0 0 10px;
}

С уважением Фонзане

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...