diff --git a/examples/mobile/UIComponents/components/controllers/expand-button.html b/examples/mobile/UIComponents/components/controllers/expand-button.html
index 687b3b40e6..08d6b427ba 100644
--- a/examples/mobile/UIComponents/components/controllers/expand-button.html
+++ b/examples/mobile/UIComponents/components/controllers/expand-button.html
@@ -27,6 +27,11 @@
Expand button on list
+
+
+ Expand button on card
+
+
diff --git a/examples/mobile/UIComponents/components/controllers/expandable-card.html b/examples/mobile/UIComponents/components/controllers/expandable-card.html
new file mode 100644
index 0000000000..a9f041f82d
--- /dev/null
+++ b/examples/mobile/UIComponents/components/controllers/expandable-card.html
@@ -0,0 +1,51 @@
+
+
+
+
+ Expandable Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Subtitle 1
+
+
+ Contents area
+
+
+
+
+
+
+ Subtitle 2
+
+
+ Contents area
+
+
+
+
+
+
+
+
diff --git a/examples/mobile/UIComponents/css/style.css b/examples/mobile/UIComponents/css/style.css
index 5f34f72998..fbd3e3763b 100644
--- a/examples/mobile/UIComponents/css/style.css
+++ b/examples/mobile/UIComponents/css/style.css
@@ -1,6 +1,6 @@
/* Header */
.btn-icon-back::after {
- -webkit-mask-image: url(./images/core_icon_back.png);
+ -webkit-mask-image: url(./images/core_icon_back.png);
mask-image: url(./images/core_icon_back.png);
}
@@ -468,7 +468,7 @@
}
/**************************************
- Slider
+ Slider
***************************************/
#slider-demo .ui-slider-vertical {
left: 50%;
@@ -624,14 +624,14 @@
}
/**************************************
- text input with buttons
+ text input with buttons
***************************************/
#textinputwithbuttons-demo .ui-content {
top: 80px;
background: white;
}
/******************************************************
- List Styles - sliders
+ List Styles - sliders
******************************************************/
#slider-description{
@@ -671,7 +671,7 @@
}
/******************************************************
- Indexscrollbar with search floating button
+ Indexscrollbar with search floating button
******************************************************/
#indexscrollbarPage .ui-header.search-active h1 {
@@ -704,4 +704,14 @@
}
.sample-unit-lines p {
margin-bottom: 2px;
+}
+
+.app-content-example {
+ height: 150px;
+ width: 100%;
+ background-color: #ddd;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/src/css/profile/mobile/common/core.less b/src/css/profile/mobile/common/core.less
index 1d44725702..c51e023824 100644
--- a/src/css/profile/mobile/common/core.less
+++ b/src/css/profile/mobile/common/core.less
@@ -166,6 +166,10 @@
border-top-right-radius: 0;
mask-border-width: 0 26 * @px_base 26 * @px_base;
}
+
+ ~ .ui-content-area {
+ margin-top: 5 * @px_base;
+ }
}
.ui-content-subheader {
diff --git a/src/css/profile/mobile/common/expandable.less b/src/css/profile/mobile/common/expandable.less
index dd90f7086e..44b891224f 100644
--- a/src/css/profile/mobile/common/expandable.less
+++ b/src/css/profile/mobile/common/expandable.less
@@ -1,4 +1,5 @@
-.ui-listview .ui-expandable {
+.ui-listview .ui-expandable,
+.ui-content-area .ui-expandable {
padding: 0 24 * @px_base;
user-select: none;
flex-direction: column;