fix(ui5-li-custom): enable setting height of the custom content (#311)

Fixes: #310
SAP · Apr 9, 2019 · 76bf9f3 · 76bf9f3
1 parent f24f78b
commit 76bf9f3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/main/src/themes-next/CustomListItem.css b/packages/main/src/themes-next/CustomListItem.css
@@ -15,14 +15,23 @@ ui5-li-custom .sap-phone .sapMLIB {
 }
 
 .sapMLIB.sapMCustomLI {
+	height: 100%;
 	padding: 0;
 }
 
+ui5-checkbox.multiSelectionCheckBox,
+ui5-radiobutton.singleSelectionRadioButton {
+	display: flex;
+	align-items: center;
+}
+
+.sapMLIB.sapMCustomLI,
 ui5-checkbox.multiSelectionCheckBox,
 ui5-radiobutton.singleSelectionRadioButton {
 	min-width: 3rem;
 }
 
+.sapUiSizeCompact .sapMLIB.sapMCustomLI,
 .sapUiSizeCompact ui5-checkbox.multiSelectionCheckBox,
 .sapUiSizeCompact ui5-radiobutton.singleSelectionRadioButton {
 	min-width: 2rem;

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html b/packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html
@@ -390,19 +390,19 @@
 		<section class="row">
 			<ui5-list header-text="Products" mode="SingleSelectEnd">
 				<ui5-li-custom type="Active">
-					<div style="width: 100%; height: 3rem; display: flex; align-items: center; justify-content: space-between">
+					<div style="width: 100%; height: 5rem; display: flex; align-items: center; justify-content: space-between">
 						<span>Laptop HP 2GB RAM Dual-core</span>
 						<ui5-link>Go to SAP</ui5-link>
 					</div>
 				</ui5-li-custom>
 				<ui5-li-custom type="Active">
-					<div style="width: 100%; height: 3rem; display: flex; align-items: center; justify-content: space-between">
+					<div style="width: 100%; height: 5rem; display: flex; align-items: center; justify-content: space-between">
 						<span>Laptop HP 2GB RAM Dual-core</span>
 						<ui5-link>Go to SAP</ui5-link>
 					</div>
 				</ui5-li-custom>
 				<ui5-li-custom type="Active">
-					<div style="width: 100%; height: 3rem; display: flex; align-items: center; justify-content: space-between">
+					<div style="width: 100%; height: 5rem; display: flex; align-items: center; justify-content: space-between">
 						<span>Laptop HP 2GB RAM Dual-core</span>
 						<ui5-link>Go to SAP</ui5-link>
 					</div>
@@ -411,19 +411,19 @@
 
 			<ui5-list header-text="Products" mode="MultiSelect">
 					<ui5-li-custom type="Active">
-						<div style="width: 100%; height: 3rem; display: flex; align-items: center; justify-content: space-between">
+						<div style="width: 100%; height: 8rem; display: flex; align-items: center; justify-content: space-between">
 							<span>Laptop HP 2GB RAM Dual-core</span>
 							<ui5-link>Go to SAP</ui5-link>
 						</div>
 					</ui5-li-custom>
 					<ui5-li-custom type="Active">
-						<div style="width: 100%; height: 3rem; display: flex; align-items: center; justify-content: space-between">
+						<div style="width: 100%; height: 8rem; display: flex; align-items: center; justify-content: space-between">
 							<span>Laptop HP 2GB RAM Dual-core</span>
 							<ui5-link>Go to SAP</ui5-link>
 						</div>
 					</ui5-li-custom>
 					<ui5-li-custom type="Active">
-						<div style="width: 100%; height: 3rem; display: flex; align-items: center; justify-content: space-between">
+						<div style="width: 100%; height: 8rem; display: flex; align-items: center; justify-content: space-between">
 							<span>Laptop HP 2GB RAM Dual-core</span>
 							<ui5-link>Go to SAP</ui5-link>
 						</div>