Can't select textbox after animating top and opacity

HCL Volt MX Volt MX Forum
1
This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

I am trying to animate a textbox's visibility. Once the animation completes, I can see the input box on the screen but I can't tap on it. It also doesn't animate the opacity - it just appears. What am I doing wrong?

I have the search box component (with contract) on a z-index of 50 and the flex container behind on a z-index of 1.

Testing on iPhone X Native.

showSearch:function() { // trigger onShowSearch event this.onShowSearch(); // turn on search visibility this.view.flxSearchContainer.setVisibility(true); 
const searchAnimation = kony.ui.createAnimation({
  "0":{"opacity": "0", "top": "0%"},
  "100":{"opacity": "1", "top": "100%"}
});
const animationConfig = {
  "duration":"0.5",
  "delay":"0",
  "iterationCount":"1",
  "fillMode":kony.anim.FILL_MODE_FORWARDS
};
const callBack = {
  "animationEnd" : function(){}
};

this.view.flxSearchContainer.animate(searchAnimation, animationConfig, callBack);

}

2

Resolved.

Unable to Click Resolution:

My component is a height of 10%. When I show the search bar, it drops below the header and is technically displayed outside the bounds of the component. You can't click on objects outside the bounds of the component even if they are visible.

Opacity Resolution:

My object above is setting opacity to a string instead of a number.

Thanks!

3

Thanks for sharing your solution. 👍🏼