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

@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));

@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.