Size a region according to its content

[Jorge Sousa]

About

What does it mean "var s = $("<span/>").html(content).appendTo("body");" ?

$("<span/>"), it's to create a span tag

.html(content) inserts the html content into the span

.appendTo("body") is to add the span to the body so that we can check the height

all of these are jquery library functions, documented worldwide.

[Davide]

Hello,
thank you to your explanation, it were the use of the <span> tag which confused me.
With the following changes to the javascript function I can get the right height of the label based on its width :

Code: Select all

      JS.Add('function labelContentHeight(content) {');
      JS.Add('  var s = $("<label style=''font-family: Verdana,Arial,sans-serif; font-size: 1.1em;white-space: -moz-pre-wrap !important;' +
      ' white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; width:233px; display:block;''/>").html(content).appendTo("body");');
      JS.Add('  var h = s.height();');
      JS.Add('  s.remove();');
      JS.Add('  return h;');
      JS.Add('}');


The only thing It has to be considered is the font family and size which have to be the same as the ones used int the HTML editor.
In which way I can set-up the default font in the html editor ?

Thank you,
Davide

[Davide]

Hello,
using the script and code you suggest me I can get the height of the label in input way.
In my project I save the retrieved label height to show each reagion with the right height.
Due to differences in browsers and users set up it happened that the height saved was not the right height for all circumstances.

I made some tests using OnRender event but without success.
Is there a way to get the same height information but in output way as when I need to show each region ?
Something like a round-trip to the browser to use the javascript function and calc the height ?
Or a javascript function the change the size of the region on the browser ?
Is each region rendered as a div ?

Thank you,
Davide

[Jorge Sousa]

Hi Davide

Sorry, but i don't understand very well what you want. You can send us an email or join skype, and even speak your native language.

[Davide]

Hello,

attached there is a simple project.
If you run it and "Add" some text from the HTML editor you note that if the text is more then 3 lines the underlying regions overlap.
I would like to size the added region so it can be rendered without overlap the others.

I'm trying to realize an on-line survey tool where the users can enter their response and read them ordered by input time.
A user should be able to enter some text in a dialog and after I would like to show it in a sort of panel list where each panel has different height based on the entered text.

I hope to be clear.
If not we you can contact me by skype : soluzionipmi

Thank you,
Davide

[Alexander Bulei]

Hi Davide,

Attached your changed demo.
Check the comments in code.

Best Regards.

[Davide]

Thank you for your suggestion.
It works in a similar way to your previous answer and it is useful to show the last inserted forum answer.
My question (sure I didn't explain well what I need) is about how to show regions related to the prevoiusly saved users answers.

Each time a user add an answer to the forum I save it in a database.
Next time the user enter the forum I need to show him all users anwsers in regions with height based on the html saved and permit him to add more answers.
For each of the previously inserted answers I need to show the html content and a "Reply" button so I need a region to group the each answer and its related button togheter.
What I need is a way to get the right html height (the witdh could be fixed) to show each saved answer region (html + button) with the right region height avoiding overlapping between them.

Attached there is a modified test application.
Take a look at my note(in formCreate event) which explain my problem about the height of regions height.

Thank you,
Davide

[Alexander Bulei]

Hi Davide,

It can be done with invisible label, but in your case, easier to add new field to TClientDataSet (like contentHTMLSize) and save there the real height.

Best Regards.

[etwoss]

What would be the code for

BrowserScript:= Format('labelContentHeight(%s)',[AnswerHTMLEditor.JQHTMLEditorOptions.jsGetContent]);

if component is as LabelEx instead of a HTML Editor?

Eroc