[SOLVED]Ion-toggle within clickable list

ionic-v1
1

Hello,

I am using ionic for a project and was wondering if it would be possible to have a toggle and a link on the same list item, for example:

    <ion-content>
       <div class="list">
            <a class="item" ng-click="blah()">
               <ion-toggle toggle-class="toggle-assertive">This is a test, does it work?</ion-toggle>
            </a>
       </div>
    </ion-content>

I have tried this and it makes the toggle unclickable as it just activates the <a><a/> tag when clicked

2

Yup, you just have to override some css defaults and reformat you markup

<ul class="list">
  
  <ion-toggle toggle-class="toggle-assertive">
    <a ng-click="blah()">
      this is with ion-toggle
    </a>
  </ion-toggle>
  
  <li class="item item-toggle">
    <a ng-click="blah()">
      this is with pure css
    </a>
    <label class="toggle toggle-assertive">
      <input type="checkbox">
      <div class="track">
        <div class="handle">
        </div>
      </div>
    </label>
  </li>
</ul>
1 Like
3

Thanks, i’ll give it a go :slight_smile:

4

I see with this example that the click only happens when you click the text, do you think it would be possible to have it when the list item itself is clicked and just not the text? For example when you use <a class="item">Some Text</a> it will display a chevron on the right and the whole item is clickable and not just the text.

5

Updated the codepen, You just need to add this to the a tags

a {
  display: block;
  width: 100%;
}
6

Thanks @mhartington :slight_smile:

7

thx for the solution! - when trying it out in my own code at device - the a link text remained not ‘click able’ - maybe its worth to clarify that for others link me - its this css thats requires otherwise the “.item-toggle” will prevent the text to be click able:

.item-toggle{
  pointer-events:initial !important;
}

why is this not just part of ionic by default?

2 Likes