How to set padding for text from borders of editable area?

I tried this

.styled-text-area Navigator {
    -fx-padding: 5px;
}

but it not worked 😕

[JordanMartinez]

Per this CSS tutorial, shouldn't you write something like this:

.styled-text-area .navigator {
    -fx-padding: 5px;
}

or perhaps this:

.styled-text-area > .navigator {
    -fx-padding: 5px;
}

Nope, I inspected CSS classes and styles using ScenicView - Navigator object doesn't have any CSS classes, so your code will not work.

CSS from my first comment correctly set padding to Navigator object, but problem is that visually nothing changed.

[JordanMartinez]

Are you adding the style sheet to the Scene?

[JordanMartinez]

What about this per the styled-text-area.css file

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

1. Yes, I'm adding CSS file to scene. I already said that I could see changes in ScenicView.

2. I found this code and it's setting padding between paragraphs. I want to set padding between paragraphs and borders of entire text area.

[TomasMikula]

The right CSS to use would be

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

Not sure why you are trying to access Navigator or ParagraphBox.

But it doesn't work anyway.

Workaround: Wrap the area in some Pane and set padding on that.

Fix: In StyledTextArea.layoutChildren(), change

virtualFlow.resize(getWidth(), getHeight());

to

Insets ins = getInsets();
virtualFlow.resizeRelocate(ins.getLeft(), ins.getTop(), getWidth() - ins.getLeft() - ins.getRight(), getHeight() - ins.getTop() - ins.getBottom());

Comment: It is super easy to forget to account for some kind of JavaFX quirk, such as padding (insets). In Region, JavaFX promises the users that they can use -fx-padding whenever they have a Region, but does not enforce in any way that implementations of Region actually take the value of padding into account. You could say that StyledTextArea is broken, because it doesn't handle padding properly. I say their design is broken. Properly handling idiosyncrasies like padding adds unnecessary complexity to otherwise straightforward code (compare the two code fragments above), and code like this has to be repeated in each third-party control. Ideally padding would be taken care of once and for all somewhere in the framework.

Thank you for your reply. I tried setting padding on .styled-text-area, but this adds padding including scrollbar, which is not what I want.

I will try using your proposed fix tomorrow.

[TomasMikula]

Good point! This fits well with my comment about breaking things apart. Turns out in the master branch @JordanMartinez already took scrollbars out of StyledTextArea, and into a wrapper node VirtualizedScrollPane. This way, if you add padding to StyledTextArea, the padding stays inside the scrollbars.

[JordanMartinez]

Yeah, we really need to release version 0.7 ....

@kuc I'm sorry for not reading your comments more carefully. Also, CSS is something with which I'm not well versed. Glad Tomas could help you out though!

I tried described fix on version from master branch, after wrapping StyleClassedTextArea into VirtualizedScrollPane, and it works. Only minor detail is wrong: top/bottom padding is always visible. It should be only visible if textarea is scrolled fully to top/bottom.

Also, SNAPSHOT version of StyleClassedTextArea has some serious issues:

• wrong mouse cursor
• delete, backspace and arrow keys are not working
• requestFocus() is not working maybe it's because I'm now calling it on VSP, I will check this again
• TextAreaSkin and TextAreaBehavior are removed, so I don't know how to now have equivalent of calling textAreaBehavior.traversePrevious() / textAreaBehavior.traverseNext()

😞

[JordanMartinez]

Also, SNAPSHOT version of StyleClassedTextArea has some serious issues:

• wrong mouse cursor
• delete, backspace and arrow keys are not working
• requestFocus() is not working

I just tested the snapshot version of SCTA and those issues did not arise.

Also, what do you mean by TextAreaSkin and TextAreaBehavior?

I just tested the snapshot version of SCTA and those issues did not arise.

That's weird. I only updated library version and this all problems showed up...

what do you mean by TextAreaSkin and TextAreaBehavior?

I'm talking about removed getSkin() method from StyleClassedTextArea

[JordanMartinez]

I'm talking about removed getSkin() method from StyleClassedTextArea

Ah! Ok. Since so many other developers needed access to the skin to further modify things, we decided to change how that works.
Now, model content of StyledTextArea (the Control) was moved to StyledTextAreaModel and StyledTextAreaView (the Skin) is now StyledTextArea.

[JordanMartinez]

Thus, StyledTextArea no longer extends Control and doesn't use getSkin().

[JordanMartinez]

Only minor detail is wrong: top/bottom padding is always visible. It should be only visible if textarea is scrolled fully to top/bottom.

My guess is that the top and bottom inset should only be factored into the layoutChildren() call when either the first or last child is visible. So, something like this code would fix it:

Edit: made code account for possibility where top and bottom are both visible

Insets ins = getInsets();
ObservableList<Cell<Paragraph<PS, S>>> cells = virtualFlow.visibleCells();
boolean topVisible = cells.contains(virtualFlow.getCell(0));
boolean bottomVisible = cells.contains(
    // since no way to know what the last cell index is in virtualFlow
    // just use the number of paragraphs
    virtualFlow.getCell(getParagraphs().size() - 1)
);

double y, height;
if (topVisible) {
    y = ins.getTop();
    height = bottomVisible
                  ? getHeight() - ins.getTop() - ins.getBottom()
                  : getHeight() - ins.getTop();
} else {
    y = 0;
    height = bottomVisible
                ? getHeight() - ins.getBottom()
                : getHeight();
}

virtualFlow.resizeRelocate(
    ins.getLeft(), 
    y, 
    getWidth() - ins.getLeft() - ins.getRight(), 
    height
);