Fix datagrid text overflow issue

solve the problem of overlapping the line due to newly created inline characters
(should used for 1.9.x)
Signed-off-by: Yogi_Wang <yawang@vmware.com>
This commit is contained in:
Yogi_Wang 2019-11-15 08:24:55 +08:00
parent e52c7c2304
commit 1ccbc3b52b
6 changed files with 61 additions and 7 deletions

View File

@ -16,6 +16,10 @@
}
}
}
hbr-label-piece {
max-width: 100%;
display: flex;
}
}

View File

@ -27,10 +27,12 @@
<div class="row flex-items-xs-between flex-items-xs-bottom fiter-task">
<div class="execution-select">
<div class="select filter-tag" [hidden]="!isOpenFilterTag">
<select (change)="doFilterJob($event)">
<option value="trigger">{{'REPLICATION.REPLICATION_TRIGGER' |translate}}</option>
<option value="status">{{'REPLICATION.STATUS' | translate}}</option>
</select>
<clr-select-container>
<select clrSelect (change)="doFilterJob($event)" >
<option value="trigger">{{'REPLICATION.REPLICATION_TRIGGER' |translate}}</option>
<option value="status">{{'REPLICATION.STATUS' | translate}}</option>
</select>
</clr-select-container>
</div>
<hbr-filter id="filter-executions" [withDivider]="true" (openFlag)="openFilter($event)"
filterPlaceholder='{{"REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER" | translate}}'

View File

@ -22,6 +22,9 @@
.filter-tag {
float: left;
margin-top: 8px;
.clr-form-control {
margin-top: 0;
}
}
.refresh-btn {
cursor: pointer;
@ -79,4 +82,9 @@ clr-datagrid {
::ng-deep .datagrid-table {
position: static;
}
}
}
.flex-items-xs-between {
display: flex;
justify-content: space-between;
}

View File

@ -67,8 +67,7 @@ $size60:60px;
}
.size-24 {
width:$size24;
height:$size24;
width: 60px;
}
.size-60 {

View File

@ -81,3 +81,12 @@
flex: 0 0 8.3%;
padding-left: 0.5rem;
}
::ng-deep {
.datagrid-row-flex {
.datagrid-row-detail {
.datagrid-cell {
padding: 11px 12px;
}
}
}
}

View File

@ -292,3 +292,35 @@
.position-relative {
position: relative;
}
clr-datagrid {
clr-dg-row {
.datagrid-scrolling-cells {
align-items: center;
width: 100%;
}
clr-dg-cell {
overflow-wrap: break-word;
}
.datagrid-expandable-caret-icon {
margin-top: 0;
}
}
.datagrid-select {
display: flex;
align-items: center;
clr-checkbox-wrapper,
clr-radio-wrapper {
.clr-control-label {
min-height: 0.8rem;
}
}
}
.datagrid-table {
.datagrid-column {
.datagrid-column-title,
clr-dg-filter {
align-self: center;
}
}
}
}