[SOLVED] Problem with padding inside a closed expandable card

Questions
1

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);
}

2

hello, this is a small solution, it does not work as it should but it is something, hopefully it will help you, the detail is that I do not know how to deactivate the opening

greetings from mx

<div class="card card-expandable card-prevent-open">
  <div class="card-content">
    <div class="bg-color-white" style="height: 300px">
      <div class="card-header text-color-black display-block">
        Your first packages
        <br>
        <small style="opacity: 0.7">Essential Repos</small>
      </div>
      <div class="list media-list card-prevent-open">
        <ul>
          <li>
            <div class="item-content card-prevent-open">
              <div class="item-media"><img src="https://pbs.twimg.com/profile_images/1046836237192040449/54RYzohk_400x400.jpg" style="border-radius:10px;" width="44" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Packix</div>
                  <div class="item-after">
                    <button class="button button-raised button-round color-gray text-color-blue" style="right:20px; width:100px;">add</button>
                  </div>
                </div>
                <div class="item-subtitle" style="bottom:13px">repo.packix.com</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content card-prevent-open  ">
              <div class="item-media"><img src="https://pbs.twimg.com/profile_images/1110018291399942150/f7lEQzwW_400x400.png" style="border-radius:10px;" width="44" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Dynastic</div>
                  <div class="item-after">
                    <button class="button button-raised button-round color-gray text-color-blue" style="right:20px; width:100px;">add</button>
                  </div>
                </div>
                <div class="item-subtitle" style="bottom:13px">repo.dynastic.co</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
3

https://framework7.io/docs/cards.html#expandable-cards

Expandable card content ( card-content ) is set to 100vw width when collapsed (closed). It is done to improve card open/close transition performance, so you need to take care about its content positioning. You can make its content width also animatable and responsive by adding additional card-expandable-animate-width class to card element, but performance can be worse in this case.

4

The elements inside card-content doesn’t have any effect if I add the class card-expandable-animate-width, i’ve tried and the content still overflows the card content but seems okay the the card is fully opened

5

JSFiddle will be helpful

6

https://jsfiddle.net/LuMartti/cz1q3pkh/27/ Here it is, you could see better the problem i’m having

7

Removing all your cutom styles and puting it in card-content-padding does the trick https://jsfiddle.net/3napxez8/

1 Like
8

That absolutely worked! Thank you, I didn’t know that class existed :sweat_smile: