ionic icon indicating copy to clipboard operation
ionic copied to clipboard

Disable horizontal bounce

Open devnix opened this issue 9 years ago • 2 comments

Hi there, thank you for your plugin! I'm finding it very useful for now, apart from the fact that ionSlideBox it's deprecated now.

The ion-slide-box have a bouncing effect on Chrome for Windows like the rest of the components, but on Android every scrollable item stops bouncing excepting the slide. This wouldn't be a big problem, but on my boss' iPad the bounce on that component is behaving crazy...

I'm not getting results with the property hasBounce. My view structure right now is the following (a little weird, but I found it the only way to make my structure and scrolls as I wanted with few CSS tweaks)

<ion-view view-title="Carta">
    <tab-slide-box tab="0" class="carta">
      <div class="tsb-icons" style="margin-top: 44px;">
        <div class="tsb-ic-wrp">
          <ion-scroll direction="x" class="tsb-hscroll scroll-view ionic-scroll" >

              <div class="tabs">
                <a class="tab-item active">Favoritos</a>
                <a class="tab-item">Bocadillos</a>
                <a class="tab-item">Hamburguesas</a>
                <a class="tab-item">Bebidas</a>
                <a class="tab-item">Cervezas</a>
                <a class="tab-item">Cervezas</a>
                <a class="tab-item">Cervezas</a>
                <a class="tab-item">Cervezas</a>
                <a class="tab-item">Cervezas</a>
              </div>

          </ion-scroll>
        </div>
      </div>
      <ion-content style="margin-top: 68px;">
        <ion-slide-box show-pager="false" on-slide-changed="updateTab($index)">
          <ion-slide>
            <ion-list>
              <div class="row">
                  <ion-item ng-repeat="article in articles" href="#/playlists/{{playlist.id}}" class="categories-item col-25"  on-hold="holdItem()">
                    <!-- {{playlist.title}} -->
                    <div class="card card--expand categories-card">
                      <div class="item item-divider categories-image" style="height: 200px; color: white;" ng-style="{'background': 'url(/img/categories/{{article.image}})  center / cover'}">
                        <div class="categories-text-overlay">
                          <h2 text-scroll>{{ article.name }}</h2>
                          <p>{{ article.subtitle }}</p>
                        </div>
                      </div>
                    </div>
                  </ion-item>
              </div>
            </ion-list>
          </ion-slide>
          <ion-slide><h1>Bocadillos</h1></ion-slide>
          <ion-slide><h1>Hamburguesas</h1></ion-slide>
          <ion-slide><h1>Bebidas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
          <ion-slide><h1>Cervezas</h1></ion-slide>
        </ion-slide-box>
      </ion-content>


    </tab-slide-box>


</ion-view>

devnix avatar Jan 20 '16 09:01 devnix

I am also facing issue with horizontal bounce.May Anyone respond me to restrict that bouncing effect,

anujsphinx avatar Mar 08 '16 09:03 anujsphinx

I would be really happy if someone could help me out with the exact same problem that @DevNIX also faced. Do anyone have a solution for restricting this bouncing effect?

Thank you!

PNSites avatar Jan 11 '17 02:01 PNSites