Languages

Menu
Sites
Language
Listview like (Circle)Settings UI

I am trying to achieve listview similar to the example shown in Circle (Settings UI) https://developer.tizen.org/ko/development/sample/web/UI/%28Circle%29_Settings_UI?langredirect=1, but when I build the project the list looks different from the one in the example where active/focused items have larger font (eg, Display has larger font & white in color while Soud has smaller font & grey in color).

Can anyone advise whether it is possible to build listview with that kind of styles? Thanks

List

Responses

4 Replies
Armaan-Ul- Islam

Have you tried to run the project from  :

New->Project-> Tizen Web Project-> Online Sample -> UI -> (Circle) Settings UI

In my case it worked.

Anyways, You can change these properties from:

<Project folder> ->css -> style.css

Here I am showing a little change in UI:

a{
    font-size: 22px;
}

.ui-listview li .img-icon {
    position: absolute;
    top: 50%;
    width: 76px;
    height: 76px;
    margin: 0;
    padding: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    background-color: rgba(245, 0, 0, 1);
}

you can try changing as you need.

Found helpful? Please mark it as the Best Answer & help others to solve similar issues.

 

Armaan-Ul- Islam

ScreenShot:

sache

Well, I too have downloaded the sample and it compiles fine. But it just doesn't look the same as the list view in Gear's device settings. "Display" and "sound" are having same font size, but in https://developer.tizen.org/ko/design/wearable/ui-components?langredirect=1#pageIndi_, the focused item has different font size than the rest though.

Armaan-Ul- Islam

This post here shed some light on the topic:

https://stackoverflow.com/questions/41540413/tizen-wearable-web-app-content-getting-smaller-when-not-in-the-center-of-the-sc/41566198#41566198