I am working on Tizen and making web app.

I have a div in html5 and I set and image as background on this div. Now i have some scenario in which I have to show some random text in this div multiple times. It is no guaranteed that text always be the same size. My image size is 300 width and 90 height.

Now I want to set my div scroll in up and down direction through javascript whenever my text is larger. I tried scrollTop, overflow: auto/scroll but its not working.

Actually I can see result on HTML view in eclipse but when I run my code on device its not showing any scrollbars. Any help would be appreciated .

Here is my code in which I have a div named textView:

  <div id="textView" style="height: 90px; width: 300px;  
    margin-left: 20px; margin-top: 20px;overflow: auto;">
  </div>

And in javascript:

  var elem = document.getElementById("textView");

  elem.scrollTop="80px";

  elem.innerHTML="llllllllllllllllllllllllllllllllllllllllll"+'<br/>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'<br/>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'</br>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'<br/>';
  elem.style.color = "White";

  elem.style.fontSize = "50px";

I want to show text in image bounds not out of bounds of image.

I am working on Tizen and making web app.

I have a div in html5 and I set and image as background on this div. Now i have some scenario in which I have to show some random text in this div multiple times. It is no guaranteed that text always be the same size. My image size is 300 width and 90 height.

Now I want to set my div scroll in up and down direction through javascript whenever my text is larger. I tried scrollTop, overflow: auto/scroll but its not working.

Actually I can see result on HTML view in eclipse but when I run my code on device its not showing any scrollbars. Any help would be appreciated .

Here is my code in which I have a div named textView:

  <div id="textView" style="height: 90px; width: 300px;  
    margin-left: 20px; margin-top: 20px;overflow: auto;">
  </div>

And in javascript:

  var elem = document.getElementById("textView");

  elem.scrollTop="80px";

  elem.innerHTML="llllllllllllllllllllllllllllllllllllllllll"+'<br/>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'<br/>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'</br>'
  +"llllllllllllllllllllllllllllllllllllllllllll"+'<br/>';
  elem.style.color = "White";

  elem.style.fontSize = "50px";

I want to show text in image bounds not out of bounds of image.

• javascript
• html
• tizen
• tizen-web-app

• What kind of device is it? On iOS devices, for example, there seems to be no way to force the displaying of scroll bars. You have to indicate it with something else or choose a different design solution. – zengabor Commented May 16, 2013 at 6:43
• 1 one more thing...maybe...developer.tizen/help/… – fnostro Commented May 16, 2013 at 6:50

4 Answers 4

I believe id you style it to overflow:scroll that should take care of it.

EDIT:

Look at setting overflow-x:hidden and overflow-y:auto

YET ANOTHER EDIT: Perhaps this: https://developer.tizen/help/index.jsp?topic=%2Forg.tizen.web.appprogramming%2Fhtml%2Fguide%2Fui_guide%2Fui_framework_scrollview.htm

Try this :- First fix the height and width of the <div> then set the overflow:auto .

document.getElementById("textView").setAttribute("style","overflow:auto;height:90px;width:500px");

or you can try

document.getElementById("textView").style.width='500px';

document.getElementById("textView").style.height='90px';

document.getElementById("textView").style.overflow='auto';

Hope it will help you.

i used iscroll for scrolling in my mobile app,Hope it may help you

I've experienced similiar problem when I was developing an ap in tizen.Overflow scroll for both axis didn't do the trick.The prob was contents was of fixed position and it didn't belonged to the scrollable division.Check that mate!