search

Samsung / TAU

TAU (Tizen Advanced UI) project for supporting web app development based on web-based ui widget components library
Other
49 stars 42 forks source link

Problem with the selector icons #1647

Open SandraAlfaro opened 3 years ago

SandraAlfaro commented 3 years ago

Hi, I'm working on a project with TAU and Tizen Studio. The project consist in developing an app for a wearable watch in Html/Css and Javascript. I used the code shared on this github to implement a selector but when i launch the app the selector doesn't show the icons i gave it. I also used the exemple given in the Tizen doc for the CSS part, but without any results. (Images of the selector , the html code and the css code are below.) Is this any kind of error from the selector or am I forgetting something ? I'm new in javascript and html/css development so it's likely that i'm just doing something wrong. Hoping to get some help here. selector html_code css_code

TomaszLukawskiSam commented 3 years ago

Hi, I don't see any issue in your code and I cannot reproduce the issue. It seems like file issue move1.svg. Could you attach sample.zip ? What version of emulator do you use?

SandraAlfaro commented 3 years ago

What do you mean by sample.zip ? I'm using Tizen Studio v4 (if i'm not wrong). I tried using background-image to insert the icon and it worked out. But when i use the mask it doesn't print the icon, just a white cercle.

TomaszLukawskiSam commented 3 years ago

I see part of the app. I suggest to check url for move1.svg file. For example, if you define the css class .move mask-image as url(images/move1.svg) in file /css/style.css then move1.svg should be in /css/images/move1.svg.

TomaszLukawskiSam commented 3 years ago

or you can define url as url(../images/move1.svg) or absolute path url(/images/move1.svg)

TomaszLukawskiSam commented 3 years ago

but I'm not sure where is the problem exactly, you can check above tips.

SandraAlfaro commented 3 years ago

All my icons are at /images/* and i tried using ../images/move1.svg and ./images/move1.svg as path but it didn't work. Currently i'm using background-image: url("../images/move1.svg"); and it works perfectly. But i would like to understand why the mask doesn't work.