Jump to content
IElite

Scrolling large amounts of text.

Recommended Posts

I need to place a large amount of text  that  needs to be placed in a control and placed on my form. The text needs to able to be word wrapped and scroll-able. However, I do not want visible scrollbars such as seen in a TW3Memo.

 

Can I use TW3ScrollControl for this?

 

I have no idea how much text will be there, but at the most three large paragraphs.  

 

The text will need to word wrap based on the size of the control holding the text.

 

I tried using a TW3Label but it seems it has no wrapping

 

procedure TForm1.InitializeForm;
var
 s: string;
 i: integer;
begin
  inherited;
  // this is a good place to initialize components
  fScroll.SetBounds(0,0, ClientWidth, ClientHeight);
  fScroll.Content.SetBounds(0,0, clientWidth, clientHeight);
  fText.SetBounds(0,0, fScroll.clientWidth, fScroll.clientHeight);
  for i:= 1 to 10000 do
   s:= s + intToStr(i) + ' ';
  fText.Caption:= s;
end;


procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fScroll:= TW3ScrollControl.Create(self);
  fText:= TW3Label.Create(fScroll.Content);
end;

I then tried placing it in the scroll control's InnerHtml

 

procedure TForm1.InitializeForm;
var
 s: string;
 i: integer;
begin
  inherited;
  // this is a good place to initialize components
  fScroll.SetBounds(0,0, ClientWidth, ClientHeight);
  fScroll.Content.SetBounds(0,0, clientWidth, clientHeight);
  for i:= 1 to 10000 do
   s:= s + intToStr(i) + ' ';
  fScroll.Content.InnerHTML:= '<html> <body> <p>' + S + '</p> </body> </html>';}
end;

that wraps, but does not scroll beyond the height of the scroll control.  Again, I do not know the height of the text at any point, cause of the device size, layout, and amount of text wrapped within.

 

If I set it to some arbitrary such as 5000, then i have extra area to scroll - with no text

 

e.g.

 fScroll.Content.SetBounds(0,0, clientWidth, 5000);

is there a way to place text in a scroll, make it wrap, and make it scroll to the end of its content without any extra space at end  (well, there could be a little extra)

 

here is my code

 

here is my demo

 

 

The #1 president has a large amount of text - so when viewed in a smaller device, or resized browser window, you will see my dilema

 

 

thanx

Share this post


Link to post
Share on other sites

I also messed with the styling 

 

tried

 fNotes.Handle.style.setProperty('overflow', 'auto');

and

fNotes.Handle.style.setProperty('overflow', 'auto:hidden');

neither works like i need

 

although   "scroll" works

 fNotes.Handle.style.setProperty('overflow', 'scroll');

kinda was hoing for something without the scrollbars

 

here is my code

 

here is my demo

Share this post


Link to post
Share on other sites

Why not just use a simple div element to put text into it and then with css (there are examples on the net for it) add scrolling effect you want.

If you want a momentum scrolling in desktop browsers then you can use iScroll or SMS implementation of momentum scroller by JLA.

 

See:

http://forums.smartmobilestudio.com/index.php?/topic/4105-vscroll-sms-component/?hl=momentum&do=findComment&comment=17564and

https://jonlennartaasenden.wordpress.com/2016/05/31/momentum-scrolling/

Share this post


Link to post
Share on other sites

I tried a TW3DivHtmlElement.  I never got it to work smoothly.  You have an example?

 

 

Why not just use a simple div element to put text into it and then with css (there are examples on the net for it) add scrolling effect you want.

If you want a momentum scrolling in desktop browsers then you can use iScroll or SMS implementation of momentum scroller by JLA.

 

See:

http://forums.smartmobilestudio.com/index.php?/topic/4105-vscroll-sms-component/?hl=momentum&do=findComment&comment=17564and

https://jonlennartaasenden.wordpress.com/2016/05/31/momentum-scrolling/

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...