How To Add Padding Between StyledTextArea And Text Contents?

[gbmhunter]

I have tried the obvious:

styledTextArea.setPadding(new Insets(10, 10, 10, 10));

but it doesn't seem to work. What is the correct way to add padding between a StyledTextArea and the textual content that it displays?

[JordanMartinez]

See https://github.com/TomasMikula/RichTextFX/wiki/RichTextFX-CSS-Reference-Guide for why that's happening and its fix

[alt-grr]

@gbmhunter See issue: #255 (comment)

[gbmhunter]

Thanks, @JordanMartinez and @kuc

I tried the code:

.styled-text-area .paragraph-box:first-paragraph .paragraph-text {
    -fx-padding: 10 10 10 10;
}

and that worked for the first and last paragraphs, but when I wanted the padding to apply to all paragraphs, the CSS:

.styled-text-area .paragraph-box .paragraph-text {
    -fx-padding: 10 10 10 10;
}

didn't work (not even for the first and last, and no other changes).

[JordanMartinez]

I tried the code [first example] and that worked for the first and last paragraphs...

@gbmhunter Right, because that's what @kuc was trying to do in his issue: add padding to only the first and last lines in the area. If I'm understanding you correctly, you want something like this....

|=====================
|                    |
|    line of text    |
|    line of text    |
|    line of text    |
|    line of text    |
|                    |
|=====================

....where the first line displayed (not just the first line of the text) has space between itself and the top edge of the viewport and the last line displayed (not just the last line of the text) has space between itself and the bottom edge of the viewport, correct?

If so, try this css. It's never been tested to see if it works because we never had someone with your issue before (I mention this issue in the layout section of the above CSS Reference Guide link):

.virtual-flow {
    -fx-padding: 10;
}

If the above CSS works, I would guess that it will screw up the behavior handling (e.g. you will click at point (x,y) but it will put the caret at (x+10, y+10).

[JordanMartinez]

Edited to make example also use scroll bars

Another workaround, and probably better than the one I mentioned above, is to do what Tomas described in his comment in Kuc's issue: wrap the area in a pane and apply padding to that pane:

public class VirtualPane<V extends Virtualized> extends Pane implements Virtualized {
    Virtualized content;

    public VirtualPane(V content) {
        this.content = content;
    }

    // for every Virtualized method, you'd need to adjust the value
    // in light of the pane's padding values

}

VirtualPane pane = new VirtualPane(area);
pane.setPadding(new Insets(10));

[gbmhunter]

Yes, sorry if I wasn't clear, I provided the CSS that just modified the first and last paragraph as an example of it working, before removing the :first-paragraph pseudo-class and then showing how it unexpectedly stopped working.

I will try those methods.

Will the code:

Pane pane = new Pane(area);
pane.setPadding(new Insets(10));

make the scroll-bars look strange, because they now won't extend to the edge of the pane?

[JordanMartinez]

Will the code [my example] make the scroll-bars look strange, because they now won't extend to the edge of the pane?

Mm... whoops! I forgot about VirtualizedScrollPane.... Yes, the second approach would be problematic because the code would actually look like this:

StyledTextArea area = //
VirtualizedScrollPane<StyledTextArea> vsPane = new VirtualizedScrollPane<>(area);
VirtualPane pane = new VirtualPane(vsPane);
pane.setPadding(new Insets(10));

Even if you add padding to the vsPane, I don't think it's layoutChildren accounts for any set padding.

[JFormDesigner]

Following works for me:

.styled-text-area .paragraph-box .paragraph-text {
    -fx-padding: 0 1em 0 1em;
}
.styled-text-area .paragraph-box:first-paragraph .paragraph-text {
    -fx-padding: 1em 1em 0 1em;
}
.styled-text-area .paragraph-box:last-paragraph .paragraph-text {
    -fx-padding: 0 1em 1em 1em;
}

[gbmhunter]

I get the following padding when applying the three CSS rules directly above.

For some reason the padding is not applied to the middle paragraphs.

[JFormDesigner]

@gbmhunter maybe there is another rule in your CSS that overwrites the padding of the middle paragraphs. Try moving the three rules to the end of your CSS.

[gbmhunter]

They are at the end as far as I can tell. Could it be something to do with the fact that I am adding text to the StyledTextPane using the method:

styledTextPane.replaceText(styledTextPane.getLength(), styledTextPane.getLength(), "abc\ndef\n");

Those \n are when I want a new line. I also add colours via:

styledTextArea.setStyle(
                    startIndex,
                    stopIndex,
                    TextStyle.EMPTY.updateFontSize(12).updateFontFamily("monospace").updateTextColor(Color.RED));

[alt-grr]

@gbmhunter I will tell you what I am using.

CSS (Important: :first-paragraph must be styled after :last-paragraph rule!):

.styled-text-area .paragraph-box .paragraph-text {
    -fx-padding: 0 5px 0 5px;
}

.styled-text-area .paragraph-box:last-paragraph .paragraph-text {
    -fx-padding: 0 5px 5px 5px;
}

.styled-text-area .paragraph-box:first-paragraph .paragraph-text {
    -fx-padding: 5px 5px 0 5px;
}

Java (simplified):

textArea = new StyleClassedTextArea();
textArea.setWrapText(true);
textArea.getStylesheets().add(SomeClass.class.getResource("text-area.css").toExternalForm());
new VirtualizedScrollPane<>(textArea);

Result:

[JFormDesigner]

There is a problem when padding is applied, which I fixed in PR #396

[JFormDesigner]

@kuc why is the order of :first-paragraph and :last-paragraph important? For me it works if :first-paragraph is before :last-paragraph.

[JFormDesigner]

@kuc forget my question. Just after writing it I realized the reason. It is for the case that the text area contains only one line.

[alt-grr]

@JFormDesigner Yep, exactly.

[gbmhunter]

@kuc , the only thing I seem to be doing differently is that I'm using a StyledTextArea rather than a StyleClassedTextArea. Wouldn't of thought this would make a difference?

[alt-grr]

@gbmhunter StyledTextArea? That's a base class, did you tried using InlineCssTextArea?

BTW: I'm using 0.7-M2 release, that's important.

[gbmhunter]

Oppps, I copied some example code which used it, I have as such:

Yes, I'm using the 0.7-M2 release.

O.K, I will try the InlineCssTextArea.

[alt-grr]

@gbmhunter Maybe when trying to set color you are overwriting padding settings, or something other is wrong with your custom implementation - just a wild guess.

[gbmhunter]

I am now using an InlineCssTextArea and removed all style settings, except for padding defined in a CSS file, still no luck :-(.

[alt-grr]

Well, it's time for using more powerful weapons - try using ScenicView for debugging.

[gbmhunter]

ScenicView is great! It gives you debugging access into JavaFX much like Chrome does with web pages.

I have used that and found nothing strange. The lines of text all seem to be in the appropriate nodes, and the style class names are set correctly.

[JordanMartinez]

Why not try creating a basic example that we can modify until it works?

[JordanMartinez]

@gbmhunter Any updates on this?

[gbmhunter]

@JordanMartinez ah sorry no, I have just left it with no padding for the moment and moved on.

[JordanMartinez]

@gbmhunter Can you post your CSS? And are you by chance using IDs (e.g. #codeArea .paragraph-text {}) in your CSS?

[JordanMartinez]

@gbmhunter Now that #510 has been merged, this should now be doable with one line:

.styled-text-are {
    -fx-padding: 20 px;
}

[gbmhunter]

@JordanMartinez , I checked out the other pull-request, the fix looks good, thanks for all the hard work put into this!!! I probably won't switch back any time soon (currently using a JavaFX WebView object with a rich text area inside, and doing all the styling in CSS, plus adding a JS API to talk to the Java app. It's ugly, but it works).

With more and more improvements like this the WebView rich text solution is less needed!

[JordanMartinez]

@gbmhunter No worries! I'm sure any switch would take a lot of time. Besides, the API might change in future versions, so I'd wait until a new stable release was made.