Enable scrolling in HTMLArea

I have a WebTextArea that posts ERRORS and WARNINGS after processing needed data. The WebTextArea works great due to scrolling but styling specific text is a problem.

So I grabbed the WEBSDK example and figured out how to make needed changes to enable color and style that is html compliant. This looks good but scrolling is a problem.

I ran across some other feeds and read mentioning of div and with problems with heights. Not certain where code or what code needs to be placed in an HTMLArea and what event to select to enable scrolling in HTMLArea when text loaded is larger than the HTMLArea.

I looked for examples and attempted to make sense of information posted in other threads but it is clear that at this time this is above my current pay grade. Any suggestions - examples.


If all you need is scrolling, you can add a style

overflow-y: scroll

@Greg O’Lone - Scrolling is all I need. I have also found examples such as [quote]overflow: auto[/quote] and [quote]

[/quote] however I have not found how to implement. In Styles I see how to set text/fonts, Boarders, Shadows, Padding, Corner Radii, and Miscellaneous but nothing there to enable setting what you suggested or I missed it. In Examples the Style example is just making two styles and setting hover etc.

I recognize that in the Shown event of HTMLarea I can start with this Me.Style =but then I have not found what to do afterwards and include what you suggested.

Do I need to create a Class and assign as a computed property or something else?

Look at the class itself. There is an event you can implement to set up the stylesheet for that particular control.

Ok. I used the XOJO iBook ‘Creating Custom Web Controls’ and using examples I created a new Class named HTMLArea. Inside the JavascriptNamespace Default value is ‘example’

Then in ‘Setup CSS’ this is typed

[code]//If you need to manipulate the CSS at all, do that here
Styles(0).Value(“padding”) = “10px 10px 10px 10px”

// Controls always have visibility set to “hidden” by default so they can be set up properly before they draw
Styles(0).Value(“visibility”) = “visible”

// This enables scrolling when beyond boundaries
Styles(0).Value(“overflow-y:”) = “scroll”[/code]

I ran this and scrolling does not work. Here is a snapshot of what I am doing in XOJO

Is that correct?

I next set the boundary controls of the CustomHTMLArea to move when the WebDialog was dragged to different size. The data is in there however scrolling does not work and if I click and drag down and when I reach the bottom of the CustomHTMLArea what is selected pops up to the top of the CustomHTMLArea

In another thread you participated in 'HTML viewer that can intercept links and scroll ’ on 15 April 2014 @Tom Iwaniec mentioned this ‘div from a fixed value to “100%” and it’s working better now’. What is the construct of that and where is that placed?

Is that a modification I need to place in SetupHTML? I include that code as well.

[code]//Return the HTML as it should be initially sent to the browser

Dim sty As String = “”
If Not Self.Enabled Then
sty = " style="“opacity:0.5;cursor:default”""
End If

Return “<div id=”"" + Self.controlid + “”"" + sty + “>” + ProcessHTML(html) + “”[/code]

I have made several attempts to write and include that but scrolling still does not work.

That sounds like you’re hoping for this to work like a styled text area where a user could select the text. Is that right?

Thats correct. The user needs this info to correct WARNINGS and ERRORS. The TextArea was great for that however users were missing the WARNINGS and ERRORS because text was one color. Thats when I took on this effort to enable coloring. Looks great I just need to enable scrolling, selecting and copying.

Well… you need to enable scrolling, but you need it to scroll while the user is dragging… and that’s completely different unfortunately.

Bear with me… I’m doing this off the top of my head…

I think you’re going to need some more styles:

-moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text;
Those should allow the div to behave more like a text field.

cursor: text

This should make the cursor into a text selection cursor.

Styles(0).Value(“overflow-y:”) = “scroll”

replace with:

Styles(0).Value(“overflow-y”) = “scroll”
Styles(0).Value(“overflow-y”) = “auto”

(leave out the ‘:’)


[code]//If you need to manipulate the CSS at all, do that here

//styles(0).Value(“padding”) = “10px 10px 10px 10px”

styles(0).Value(“overflow-y”) = “auto” //“auto” shows de vertical scrollbar only when necessary
// “scroll” shows the vertical scrollbar allways

styles(0).Value("- moz - user - Select") = “Text”
styles(0).Value("- khtml - user - Select") = “Text”
styles(0).Value("- webkit - user - Select") = “Text”
styles(0).Value("- ms - user - Select") = “Text”
styles(0).Value(“user - Select”) = “Text”

// Controls always have visibility set to “hidden” by default so they can he set up properly before they draw
styles(0).Value(“visibility”) = “visible”

After these changes selecting text beyond the boundaries of the HTMLarea works on Firefox on Windows 10.

The looks of the HTMLArea however didn’t change a bit, only the cursor becomes the textcursor.

@Greg O’Lone thanks for your response. As I was trying to work out the syntax @Andre Kuiper response identified lines I needed to hide.

Greg - you got me almost there and Andre - you identified the closing solution. Is there anyway I can identify both of you?

Why? Because this is my first foray into CSS and to me this solution is sweet.

Carl, THE guru here is Greg, he knows about everything referring to the webedition of Xojo. I only saw that you were missing that the ‘:’ was only the seperation of argumentname and its value, for the rest all the credits go to Greg.

@Andre Kuiper - I hear that and thank you @Greg O’Lone it is. I am looking at and integrating other CSS aspects and it is like a door opening

Thanks to both of you