demo: fix virtuallist sample layout

In the virtuallist 2line sample, the main text and sub text2 overlap
each other. Changed layout of listitem sub-elements to prevent
overlapping between them.
Resolves N_SE-22625.

Fixed more samples' layout.
NOTE: toggleswitch sample is removed, because toggleswitch is shown
incorrectly for now.

Change-Id: Ic1d1eff2468c3b7ec326c6e4ad460e505cdfcbeb

diff --git a/demos/tizen-winsets/widgets/list/list.html b/demos/tizen-winsets/widgets/list/list.html
index 768934c..2e9f3af 100755 (executable)
--- a/demos/tizen-winsets/widgets/list/list.html
+++ b/demos/tizen-winsets/widgets/list/list.html
@@ -31,7 +31,6 @@
                        <li data-role="list-divider">Virtual List</li>
                        <li><a href="virtuallist-normal.html">Virtual List Normal Style 1line</a></li>
                        <li><a href="virtuallist-normal_3_1_4.html">Virtual List Normal Style 1line-btn1</a></li>
-                       <li><a href="virtuallist-normal_3_1_6.html">Virtual List Normal Style 1line-toggle</a></li>
                        <li><a href="virtuallist-normal_3_1_14.html">Virtual List Normal Style 1line-bigicon5</a></li>
                        <li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>
                </ul>

diff --git a/demos/tizen-winsets/widgets/list/virtuallist-normal.html b/demos/tizen-winsets/widgets/list/virtuallist-normal.html
index f62eff4..2d7a20d 100755 (executable)
--- a/demos/tizen-winsets/widgets/list/virtuallist-normal.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist-normal.html
@@ -1,15 +1,26 @@
-       <div data-role="page" id="virtuallist-normal_1line" class="virtuallist_demo_page" data-add-back-btn="true">
-               <div data-role="header" data-position="fixed">
-                       <h1>Virtual List - Normal Style 1line</h1>
-               </div>
-               <div data-role="content">
-                       <script id="tmp-1line" type="text/x-jquery-tmpl">
-                               <li class="ui-li-1line"><span class="ui-li-text-main">${NAME}</span></li>
-                       </script>
+<div data-role="page" id="virtuallist-normal_1line" class="virtuallist_demo_page" data-add-back-btn="true">
+       <div data-role="header" data-position="fixed">
+               <h1>Virtual List - Normal Style 1line</h1>
+       </div>
+       <style type="text/css">
+#virtuallist-normal_1line_ul li .ui-li-text-main {
+       max-width:95%;
+       display:inline-block;
+       overflow:hidden;
+       text-overflow: ellipsis;
+       white-space: nowrap;
+}
+       </style>
+       <div data-role="content">
+               <script id="tmp-1line" type="text/x-jquery-tmpl">
+                       <li class="ui-li-1line">
+                               <span class="ui-li-text-main">${NAME}</span>
+                       </li>
+               </script>
 
-                       <ul id="virtuallist-normal_1line_ul" data-role="virtuallistview" data-template="tmp-1line" data-dbtable="JSON_DATA" data-row="100">
-                       </ul>
-               </div>
-               <div data-role="footer">
-               </div>
+               <ul id="virtuallist-normal_1line_ul" data-role="virtuallistview" data-template="tmp-1line" data-dbtable="JSON_DATA" data-row="100">
+               </ul>
+       </div>
+       <div data-role="footer">
        </div>
+</div>

diff --git a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_14.html b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_14.html
index 850f892..9f0c28b 100755 (executable)
--- a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_14.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_14.html
@@ -4,11 +4,20 @@
        <div data-role="header" data-position="fixed">
                <h1>Virtual List - Normal Style 1line-bigicon5</h1>
        </div>
+       <style type="text/css">
+#virtuallist-normal_1line-bigicon5_ul li .ui-li-text-main {
+       max-width:75%;
+       display:inline-block;
+       overflow:hidden;
+       text-overflow: ellipsis;
+       white-space: nowrap;
+}
+       </style>
        <div data-role="content">
                <script id="tmp-1line-bigicon5" type="text/x-jquery-tmpl">
                        <li class="ui-li-1line-bigicon5">
-                               <span class="ui-li-text-main">${NAME}</span>
                                <img src=${TEAM_LOGO} class="ui-li-bigicon">
+                               <span class="ui-li-text-main">${NAME}</span>
                                <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
                        </li>
                </script>

diff --git a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_4.html b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_4.html
index 8264210..ca5b0fc 100755 (executable)
--- a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_4.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_4.html
@@ -1,17 +1,28 @@
-       <div data-role="page" id="virtuallist-normal_1line-btn1" class="virtuallist_demo_page" data-add-back-btn="true">
-               <div data-role="header" data-position="fixed">
-                       <h1>Virtual List - Normal Style 1line-btn1</h1>
-               </div>
-               <div data-role="content">
-                       <script id="tmp-1line-btn1" type="text/x-jquery-tmpl">
-                               <li class="ui-li-1line-btn1">
-                                       <span class="ui-li-text-main">${NAME}</span>
-                                       <div data-role="button" data-inline="true">${ACTIVE}</div>
-                               </li>
-                       </script>
-                       <ul id="virtuallist-normal_1line-btn1_ul" data-role="virtuallistview" data-template="tmp-1line-btn1" data-dbtable="JSON_DATA" data-row="100">
-                       </ul>
-               </div>
-               <div data-role="footer">
-               </div>
+<div data-role="page" id="virtuallist-normal_1line-btn1" class="virtuallist_demo_page" data-add-back-btn="true">
+       <div data-role="header" data-position="fixed">
+               <h1>Virtual List - Normal Style 1line-btn1</h1>
        </div>
+       <style type="text/css">
+#virtuallist-normal_1line-btn1_ul li .ui-li-text-main {
+       max-width:62%;
+       display:inline-block;
+       overflow:hidden;
+       text-overflow: ellipsis;
+       white-space: nowrap;
+}
+#virtuallist-normal_1line-btn1_ul li .ui-btn {
+}
+       </style>
+       <div data-role="content">
+               <script id="tmp-1line-btn1" type="text/x-jquery-tmpl">
+                       <li class="ui-li-1line-btn1">
+                               <span class="ui-li-text-main">${NAME}</span>
+                               <div data-role="button" data-inline="true">${ACTIVE}</div>
+                       </li>
+               </script>
+               <ul id="virtuallist-normal_1line-btn1_ul" data-role="virtuallistview" data-template="tmp-1line-btn1" data-dbtable="JSON_DATA" data-row="100">
+               </ul>
+       </div>
+       <div data-role="footer">
+       </div>
+</div>

diff --git a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_2_7.html b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_2_7.html
index 6fbb4cc..d1c6831 100755 (executable)
--- a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_2_7.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_2_7.html
@@ -4,14 +4,29 @@
        <div data-role="header" data-position="fixed">
                <h1>Virtual List - Normal Style 2line-star1</h1>
        </div>
+       <style type="text/css">
+       #virtuallist-normal_2line-star1_ul > li .ui-li-text-main {
+               max-width:95%;
+               display:inline-block;
+               overflow:hidden;
+               text-overflow: ellipsis;
+               white-space: nowrap;
+       }
+       #virtuallist-normal_2line-star1_ul > li .ui-li-text-sub2 {
+               max-width:60%;
+               width: auto;
+               margin-right:1em;
+               top: 1.59rem;
+       }
+       </style>
        <div data-role="content">
                <script id="tmp-2line-star1" type="text/x-jquery-tmpl">
                        <li class="ui-li-has-multiline">
-                               ${NAME}
+                               <span class="ui-li-text-main">${NAME}</span>
                                <span class="ui-li-text-sub">${ACTIVE}
                                        <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
                                </span>
-                               <span class="ui-li-text-sub2" style="margin-right:1em;">${FROM}</span>
+                               <span class="ui-li-text-sub2">${FROM}</span>
                        </li>
 
                        </script>