Is there anyway to disable the List Item on clicked visual effect?

Is there anyway to disable the List Item on clicked visual effect?

  

Hello!

I've been developing a mobile application, and sometimes using a list item suits best our needs, for its swipe capabilities, but something that bother us is that when it is clicked, the component produces a gray wave visual effect that is not interesting for us. Is there anyway to disable it, any javascript code, or overriding the list-item css class?


Solution

Hi Henrique,

I think the following code solves your problem:

SyntaxEditor Code Snippet

.scale-animation {
    background-color: transparent;
}


Let me know if it works,

Cheers

Solution

Henrique Batista wrote:

Hi Henrique,

I think the following code solves your problem:

SyntaxEditor Code Snippet

.scale-animation {
    background-color: transparent;
}


Let me know if it works,

Cheers

No it didn't work. But the only thing i did was adding the code you sent me to my block style sheet. Should I do anything else?

I understood your point in trying to override the animation color for a transparent one. But it seems that it is overriding the list-item background color.

Hey,

Interesting, it worked on my app, see here. The list-item supposedly has a different class, this should affect only the animation.

Can you provide a print of the tree view or a sample .oml to reproduce the issue? Don't know what your block contains.

Also can you give it a try and use it on the theme css or page css just to see if it works? The proper-way should be to declare it on the  theme like .my-class .scale-animation ... to ensure that you'll only affect the animation inside that particular class.

Cheers


Henrique Batista wrote:

Hey,

Interesting, it worked on my app, see here. The list-item supposedly has a different class, this should affect only the animation.

Can you provide a print of the tree view or a sample .oml to reproduce the issue? Don't know what your block contains.

Also can you give it a try and use it on the theme css or page css just to see if it works? The proper-way should be to declare it on the  theme like .my-class .scale-animation ... to ensure that you'll only affect the animation inside that particular class.

Cheers


Sorry, it works now, but a had to add a visibility: hidden property to do so. Thanks!!

SyntaxEditor Code Snippet

.scale-animation {     
    background-color: transparent !important;
    visibility: hidden;
}

Cool! Glad that you figured it out :D