Ion-toggle text ellipsis problem

ionic-v1
1

Hi,

I’m wondering what I’m wrong, I tried to use ion-toggle, but it seems that the

breaks the ellipsis on the text:

image

The first items is done using:

  <ion-item ng-repeat="group in groups" class="item-toggle item-toggle-left">
    {{group.name}}
    <label class="toggle">
      <input type="checkbox" ng-model="group.notif" ng-checked="group.notif" ng-change="subscribe(group)" ng-model-options="{ debounce: 350 }">
      <div class="track">
        <div class="handle"></div>
      </div>
    </label>
  </ion-item>

while the second is done by:

  <ion-toggle ng-repeat="group in groups" ng-model="group.notif" ng-checked="group.notif" ng-change="subscribe(group)" ng-model-options="{ debounce: 350 }">
    {{ group.name }}
  </ion-toggle>

To fix it, I need to add the css:

div.item-toggle > div[ng-transclude] {
    display: inline;
}

Any idea?

2

Your CSS was exactly what I was looking for! I think you might have been asking if this is a bug… I believe it is. But who knows - perhaps it’s some sort of “feature”… Regardless, thanks! :slight_smile:

3

you’re welcome :slight_smile: