ACE editor, fixed height

[Florent Georges]

Hi,

I use ACE to "pretty print" code snippets on a web page.  It is configured as read-only, the snippets are not editable.  It is a very good solution even only to display code.

The only problem I have is that I do not want to have a fixed-size text area to write code, like an editor.  I want to display the code entirely, using exactly the vertical space needed.  Whether the code is 1-line long or several hundred of lines, I would like ACE to use exactly the vertical space needed, depending on the number of lines to display.

Is there an option to achieve that?

You can see an example at http://h2oconsulting.be/blog/oxygen-scala-plugin-repo.

Regards,

--
Florent Georges

[Harutyun Amirjanyan]

to make editor to automatically resize to fit content you can use maxLines option with a large value

editor.setOption("maxLines", 1000)

but using static highlighter plugin might be a better solution, see
https://github.com/ajaxorg/ace/blob/master/demo/static-highlighter.html#L61

http://ace.c9.io/build/demo/static-highlighter.html

​

[Florent Georges]

Brilliant, it works great, thank you!

The only thing I could not solve is to make it use a horizontal scrollbar when the text is larger than the page.  From your example, I would have expected `trim: true` to do exactly that, but neither false or true change anything.  See for instance the last code snippet in the following page (yes, every snippet is there twice, once using the old version, once with the version based on your links):

http://test.h2oconsulting.be/blog/oxygen-scala-plugin-repo

Thank you, regards,

--
Florent Georges

[Harutyun Amirjanyan]

trim is for trimming whitespace from textcontent of the div

to use scrollbar add css

.ace_static_highlight {

  white-space: pre;

  overflow: auto;

}

i can also add wrap option for this

[Florent Georges]

Thank you! I've added it to the CSS, and have checked it is applied
to the generated div element, but its stays as it is (no horizontal
scrollbar). Tried on Firefox and Chrome:
http://test.h2oconsulting.be/blog/oxygen-scala-plugin-repo.

--
Florent Georges
http://fgeorges.org/
http://h2oconsulting.be/

> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Ajax.org Cloud9 Editor (Ace)" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/ace-discuss/8Ry41kC7I0c/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> ace-discuss...@googlegroups.com.
> To post to this group, send email to ace-d...@googlegroups.com.
> Visit this group at http://groups.google.com/group/ace-discuss.
> For more options, visit https://groups.google.com/d/optout.

[Harutyun Amirjanyan]

On Fri, May 15, 2015 at 5:53 PM, Florent Georges <fgeo...@gmail.com> wrote:

nk you!  I've added it to the CSS, and have checked it is applied
to the generated div element, but its stays as it is (no horizontal
scrollbar).  Tried on Firefox and Chrome:

On http://test.h2oconsulting.be/blog/oxygen-scala-plugin-repo. i see there is a conflict with another rule
with higher specificity. try

.code .ace_static_highlight {

  white-space: pre;

  overflow: auto;

}

[Florent Georges]

And I thought I checked for conflicts... Works perfect, thank you!

--
Florent Georges
http://fgeorges.org/
http://h2oconsulting.be/