Text "fragments" left-over with ng-show?


#1

I’m not sure if this is an ionic-specific thing or not, but I’ve never encountered it before. This is happening in both web browsers (ionic serve Chrome, Safari, etc) and on iPad. I have an element that has ng-show, the variable for which gets set to TRUE on click of any of the elements in a list on the same page.

< div class=“objectText” ng-show=“wineDetails” >
< h4 >{{selectedWine.name}}< /h4 >
< p >{{selectedWine.desc}}< /p >
< /div >

Looks like this:

Problem is, when selectedWine.desc isn’t as long, SOMETIMES you get these slivers of text showing up from previous clicks.

This behavior isn’t consistent at all and happens maybe 10% of the time. Still, that’s enough to warrant a problem.

I’ve tried putting ng-show on the < p > tag, but that doesn’t fix it. I’ve tried setting that < p > tag to have a fixed height and white background to be taller than the text is, but still the slivers show up in that area.

Tried ng-cloak to no avail as well.

Any help appreciated!


#2

bump of the day twenty characters


#3

At this point I’m ready to just use jquery to try and fade-in/out the div, since ionic fade-in animation is buggy and isn’t very compatible with ng-show (only fires once, can’t fade-out/in)

In fact, that’s what I just did. For anyone wondering how, include jquery.min in the index and then in the controller

$scope.theClick = function() {
    $('.fadein').hide().fadeIn();
};

#4

Any chance you could put together a codepen for this?