Hi,
I am implementing menu on home using ion-scroll, I need to content/buttons in scroll should grow from the bottom and if items in scroll reach to particular height then items should be scrollable.
issue: buttons in scroll area are sticking to top and adding items are increasing from top.
home.html
home.scss
.home-menu-panel {
width: 33.4%; //342px;
display: flex;
flex-direction: column;
position: absolute;
top: 0px;
bottom: 0px;
z-index: 1;
.menu-items {
background: rgba(0, 0, 0, 0.5);
.menu-item {
background: url(’…/assets/icons/MenuItemBg.png’);
background-size: 100% 100%;
margin-top: 0px;
text-align: right;
padding: 0px;
text-decoration: none;
&.activated {
background: url(’…/assets/icons/MenuItemBg_selected.png’) no-repeat,
url(’…/assets/icons/MenuItemBg.png’);
background-size: 84% 100%, 100% 100%;
}
.menu-item-label {
font-size: 1.5rem;
margin-right: 15px;
padding: 0;
line-height: 58px;
text-transform: uppercase;
font-family: $font-family-medium;
color: white;
}
.menu-item-icon {
padding: 0px;
}
&:last-child {
}
.menu-sub-items {
button {
height: 100%; // min-width: 70%;
width: 70%;
min-height: 58px;
border: none;
background-color: transparent;
background-position: center;
background-size: 105%;
background-repeat: no-repeat;
.activated {
}
}
}
}
}
.heading-container {
background-color: $pageBg;
display: flex;
flex: 1;
min-height: 180px;
}
}
any one have idea how to get issue resolved, i got struck from 2 days.