У меня есть элемент (кнопка), и я хочу расположить его под правым нижним углом текстовой области (есть также еще несколько элементов справа от текстовой области. Поскольку ширина этой текстовой области зависит от дисплея Размер, я хочу как-то установить левое поле этой кнопки в зависимости от ширины области текста. Это даже возможное решение? Я также использую 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;
}
С уважением Фонзане