Hello, today I tried Framework7 for the first time and I’m trying to achieve the App Store Cards but I’m having a problem when I put elements inside of the expandable card, the elements appears to be outside of the card when it’s closed.
Here’s an example of the problem: https://i.imgur.com/zGgPqlm.png
Setting the class “padding” to a box wrapping the elements only applies it to the left side when the card is closed, I see the padding at the right when I open the card.
Is there a way to fix this?
Here’s my code:
<div class="no-margin-horizontal card card-expandable">
<div class="card-content">
<div class="bg-color-white width-auto" style="height: 400px">
<div class="card-header text-color-black display-block">
<div class="card-title-small" style="opacity: 0.5">Your first packages</div>
<div>Essential Repos</div>
</div>
<div class="padding">
<div class="cell"> <a class="cell-link" href="cydia://url/https://cydia.saurik.com/api/share#?source=https%3A%2F%2Frepo.packix.com">
<div class="cell-icon-small">
<picture class="ios-app-icon">
<source class="we-artwork__source" srcset="HTML/packix.png 3x">
<img class="app__img we-artwork__image" src="HTML/packix.png" alt="" height="50" width="50"> </picture>
</div>
<div class="cell-group small-cell">
<div class="cell-info">
<div class="cell-tweak-title">Packix</div>
<div class="cell-tweak-subtitle">repo.packix.com</div>
</div>
<button class="itembtn" style="max-width: 74px; float: right">ADD</button>
</div>
</a> </div>
<div class="cell"> <a class="cell-link" href="cydia://url/https://cydia.saurik.com/api/share#?source=https%3A%2F%2Frepo.dynastic.co">
<div class="cell-icon-small">
<picture class="ios-app-icon">
<source class="we-artwork__source" srcset="HTML/dynastic.png 3x">
<img class="app__img we-artwork__image" src="HTML/dynastic.png" alt="" height="50" width="50"> </picture>
</div>
<div class="cell-group small-cell">
<div class="cell-info">
<div class="cell-tweak-title">Dynastic</div>
<div class="cell-tweak-subtitle">repo.dynastic.co</div>
</div>
<button class="itembtn" style="max-width: 74px; float: right">ADD</button>
</div>
</a> </div>
</div>
<a href="#" class="link card-close card-opened-fade-in color-black" style="position: absolute; right: 15px; top: 15px"> <i class="icon f7-icons">close_round_fill</i> </a> </div>
<div></div>
<div class="card-content-padding"> </div>
<p>More info in here.</p>
</div>
</div>
And the custom CSS:
.cell {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.cell .cell-link {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.cell .cell-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 78px;
margin-left: 10px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
border-bottom: 1px solid #d1d1d1;
}
.cell-group.small-cell {
height: 60px;
}
.cell-icon {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 15px;
}
.cell-info {
width: 100%;
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
text-align: left;
}
.cell-tweak-title {
color: #000;
font-size: 16px;
line-height: 22px;
}
.cell-tweak-subtitle {
overflow: hidden;
height: 20px;
margin-right: 10px;
color: rgba(0, 0, 0, .6);
}