SAPUI5 ObjectListItem圖標未對齊

我正在使用帶有SAPUI5中圖標的ObjectListItem，但圖標並不總是與文本對齊。SAPUI5 ObjectListItem圖標未對齊

我：

<List> 
<ObjectListItem title="title" type="Active" number="{/data/value}" 
icon="{= ${/data/value === '1' ? 'sap-icon://accept' : 'sap-icon://decline'}"> 
</ObjectListItem> 
</List>

和風格：

.sapMObjLIconDiv { 
    float: right; 
    height: 0;} 

.sapMObjLIcon.sapUiIcon { 
    font-size: 18px; 
    line-height: 1.5rem; 
    margin: 0 auto;}

和價值有不同的長度，有時圖標出現在文本：

感謝

來源

2017-07-03 lorenag83

您的自定義CSS是重疊的原因。您可以向文本添加邊距，以使其不與圖標重疊。

.sapMObjLNumberDiv{ 
    margin-right:60px; 
}

另外，我會建議你添加一個自定義的CSS類到列表中，並將所有的樣式應用到該類。這將防止使用類似標準類的其他控件出現任何問題。

來源

2017-07-04 06:32:22

嗨，但添加邊距將移動一切。問題是，因爲它是一個數據綁定的字段，它具有不同的長度，我總是在文本前面需要圖標。添加邊距將用於第二行（圖像），對於第一行，圖標將太過於文本。 – lorenag83

SAPUI5 ObjectListItem圖標未對齊

回答

相關問題