Я создаю splitter-resizer в Angular, чтобы настроить ширину 2 панелей. Есть 2 горизонтальных участка, и ширина столбцов на каждой стороне должна быть одинаковой. Однако я заметил, что вычисление ширины неверно на границе, которая касается элемента переполнения текста. Это приводит к тому, что верхняя и нижняя панели отключаются примерно на размер одного текстового символа.
Что можно сделать, чтобы ширина div соответствовала настройке ngStyle?
РЕДАКТИРОВАТЬ: я заметил что если для синей панели2 установить ширину неопределенной, кажется, что размер 2 панелей и их правильное выравнивание, но я думаю, что это не правильный путь.
app.component. html
<div #container class="container">
<div class="section flex-container-row">
<div [ngStyle]="stylePanel1" class="panel1">1</div>
<div class="resizer" (click)="startdrag()" (mousedown)="startdrag($event)"></div>
<div [ngStyle]="stylePanel2" class="panel2 flex-container-row">2</div>
</div>
<div class="section flex-container-row">
<div [ngStyle]="stylePanel1" class="panel1">
<div class="longtext">this is a very long text that should be cut off when resizing.</div>
</div>
<div class="resizer" (click)="startdrag()" (mousedown)="startdrag($event)"></div>
<div [ngStyle]="stylePanel2" class="panel2">4</div>
</div>
</div>
app.component.s css
* {
box-sizing: border-box;
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: pink;
}
.section {
width: 100%;
height: 130px;
border: 1px solid magenta;
}
.flex-container-row {
display: flex;
flex-direction: row;
}
.resizer {
flex: 0 0 5px;
background-color: #ddd;
cursor: ew-resize;
}
.panel1 {
background-color: red;
width: 100px;
}
.panel2 {
background-color: blue;
}
.longtext {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
