语言

Menu
Sites
Language
Web application widget - simple css selectors not working

I tried simple thing

#container-top-left {
    border-right: 1px #4f4f4f solid;
    border-bottom: 1px #4f4f4f solid;
    background-image: url("../images/icon-off.png");
    background-position: 59px 59px;
}
#container-top-left.on {
    background-image: url("../images/icon-on.png");
}

doesn't work. Why?

Even this doesnt work:

a:active#container-top-left {
    background-image: url("../images/icon-on.png");
}

Can I read somewhere what does or doesn't work for web app/widget? In documentation it says html5/CSS3 but it is not true.

Is it a bug? Does it happen to anyone?

Thanks.

 

edit: I miss-copied a block. Fixed.
 

编辑者为: Angry 开 12 4月, 2018
列表

响应

15 回复
André Reus

hi, You may add image on html and then beatify it by css like this way 

<div id="no-alarm" class="main-container" style="display: none;">
      <img src="image/alarm_widget_no_alarm.png" class="no-alarm-img"/>
      <div id="add-alarm" class="add-alarm-text">Add alarm</div>
 </div>

.no-alarm-img {
    position: absolute;
    width: 110px;
    height: 110px;
    opacity: 1;
    margin-left: 125px;
    margin-top: 107px;
}

.add-alarm-text {
    position: absolute;
    width: 240px;
    height: 42px;
    margin-left: 60px;
    margin-top: 210px;
    font-size: 35px;
    text-align: center;
}

You can also check some condition on web widget and decide accordingly...

 /*
     * Show/hide the alarm according to the alarm data
     */
    var alarm = document.getElementById('alarm'),
        noAlarm = document.getElementById('no-alarm');
    if(alarmData.type !== 'noAlarm'){
        noAlarm.style.display = 'none';
        alarm.style.display = 'block';
    } else {
        noAlarm.style.display = 'block';
        alarm.style.display = 'none';
}

Also you can check this https://developer.tizen.org/community/tip-tech/showing-system-info-wearable-widget-tizen-web

Angry

Thanks, I know other approaches as well, but the point of this post is to figure out why I can't chain single element selectors like #someId.someClass.someOtherClass

Slawek Kowalski

Please add your html code snippet to check what happens.

Angry

This is html

<a id="container-top-left" class="light-button on"></a>

 

This is complete css for that element


.light-button {
    display: inline-block;
    width: 179px;
    height: 179px;
    background: black no-repeat;
    background-size: 90px 90px;
}
#container-top-left {
    border-right: 1px #4f4f4f solid;
    border-bottom: 1px #4f4f4f solid;
    background-image: url("../images/icon-off.png");
    background-position: 59px 59px;
}
#container-top-left.on {
    background-image: url("../images/icon-on.png");
}

 

Slawek Kowalski


According to your html code you have button 'on' at start. I am not sure what your are going to have finally but removing 'on'  sets image to icon-off.png - button is off state. Seems it works correctly.

 

That is correct:

a#container-top-left:active{

...

}

Angry

I know its on at start, that is not the point. Of course I am gonna change the on state with javascript (adding/removing class).
THE POINT is, that the code above will produce a button with icon-off instead of icon-on as a background - which means that this selector #container-top-left.on doesn't work.

Please if you try the code I provided to you (please supply some dummy icons or use background color) will you see the background included in #container-top-left.on?

Thanks

 

 

GEUNSOO KIM

Well, I'm not he, but have tried as you wrote above and your css code works correctly on Tizen 3.0 emulator.

What I've done was:

1. create a s Tizen project. (with mobile 3.0 profile and select templet "BasicUI")

2. added icons (icon-on.png, icon-off.png) into "images" folder

3. added CSS code you wrote with background color change to white (because the  icons are in black-and-white so needed to change it to display them correctly.)

4. added a html line you wrote above.

5. launch the app on tizen 3.0 mobile emulator

Then I can see the "icon-on.png" as the background as you have designed.

If I remove the "on" part of the 'container-top-left' class in html, I can see "icon-off.png" as you expected.

So I wonder what is your platform to run the code.

 

 

Angry

Thank you Kim,

I don't understand then why it doesn't work for me. Do I have to load some special libraries or something? I tried to run the code in 3.0 emulator as well as gear sport watches which run 3.0.1.

Angry

I have to add, that I was building web widget, not web app, is it possible that it does not work for web widgets?


 

GEUNSOO KIM

I have tried a web widget project and the symptom happens. It looks a kind of bug at all.

For your work arround, you'd better define ".on" and ".off" instead of "#container-top-left" and "#container-top-left.on" for now.

 

André Reus

Web widget has some limitation compared to web application ... 

GEUNSOO KIM

Is there any document about it somewhere? If there is, let us know please.

And if the limitation is not published to user properly, the limitation should be called as 'bug'.

André Reus

Most of these are now declared ... so i can tell these as limitations ...for example

* The Web widget engine does not support HTML heading styles (h1, h2, ..., h6).

* The Web widget engine does not support hyperlinks.

* Web widget engine does not support iframes.

* The Web widget engine does not support the <form> element. 

* The Web widget engine does not support innerHTML and innerText properties. 

* For Web widget content that is less than or equal to 50 kB... so TAU can be included for this reason 

See here https://developer.tizen.org/development/guides/web-application/application-management/applications/widget-application#user-content-how-are-click--touch-events-handled-in-web-widgets

Angry

Thank you for investigating.

It is quite disappointing though. Developers should not be restricted like that. I understand some things like <a> can be an issue, but some restrictions are unreasonable.

Anyway, thank you again.

Angry

This is the definition of what web widgets supports

https://developer.tizen.org/development/api-references/web-application?redirect=/dev-guide/latest/org.tizen.web.apireference/html/wearable_widget/web_widget.html

(linking for future reference).