TizenWinsetDemo : 2line-text demo bug fix

modify button width for long text button(N_SE-27312)

Change-Id: Iaf68e6a58e43c3b887a1bd96b00595321f82cfa5

diff --git a/demos/tizen-winsets/tips/two-line-text/two-line-text.html b/demos/tizen-winsets/tips/two-line-text/two-line-text.html
index 177f48d..b1e5933 100644 (file)
--- a/demos/tizen-winsets/tips/two-line-text/two-line-text.html
+++ b/demos/tizen-winsets/tips/two-line-text/two-line-text.html
@@ -6,8 +6,8 @@
        <div data-role="content">
                <p> short button or long text button</p>
                <p> do not need to control width. because button control text width in case content area<p>
-               <div data-role="button" data-inline="true">Text Button Test</div>
-               <div data-role="button" data-inline="true">Text Button Test. long text line</div>
+               <div data-role="button" data-inline="true">Text Button</div><br>
+               <div data-role="button" data-inline="true">Long Text Button Test</div>
                <br>
                <p> but some case, for example width fixed area or narrow width<br>
                browser change text to ellipsis </p>
@@ -20,15 +20,20 @@
                                <label id="textposition" for="segment863">This button is long<br>please type 2line</label>
                        </fieldset>     <br>
                <p> to make text in button, 2 line
-               <p> Simple making step is ...<br><br>
-               1. first insert &lt;br&gt; tag between text  <br><br>
-               2. then set fontsize to see text in small area <br>
-                  &nbsp;&nbsp;ex&gt; $( "#textposition .ui-btn-text" ).css("font-size", "12px");  <br><br>
-               3. if element attribute or inner attributes has padding-top/bottom,<br>
-                control this value because this value hide some text top/bottom <br>
-                  &nbsp;&nbsp;ex&gt; $( "#textposition" ).find("span").css("padding-top", "2px"); <br><br>
-               4. last control height between line text using line-height  <br>
-                        &nbsp;&nbsp;ex&gt; $( "#textposition" ).find("span").css("line-height", "10px"); <br><br><br><br>
+               <p> Simple making step is ...<br>
+               <div>
+                       <p style="margin-right:0.5em; padding:1em; font-size:0.7em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+                       1. first insert &lt;br&gt; tag between text.<br><br>
+                       2. then set fontsize to see text in small area.<br>
+                               &nbsp;&nbsp;var $elTxt = $( "#textposition" );<br>
+                         &nbsp;&nbsp;$elTxt.find( ".ui-btn-text" ).css("font-size", "12px");<br><br>
+                       3. if element attribute or inner attributes has padding-top/bottom,
+                        control this value because this value hide some text top/bottom.<br>
+                         &nbsp;&nbsp;$elTxt.find("span").css("padding-top", "2px");<br><br>
+                       4. last control height between line text using line-height.<br>
+                               &nbsp;&nbsp;$elTxt.find("span").css("line-height", "10px");<br>
+                       </p>
+               </div><br>
        </div>
        <div data-role="footer">
        </div>