make text area like notepad JavaFX

Question

How can I style a text field to look like a notepad using CSS or code?

I tried what said here, which was:

textarea {
 background: url(https://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

but it didn`t affect my text area.

Here is what i`m looking for:

enter image description here

Thanks

The answer will be somewhat like: [Background with 2 colors in JavaFX?](http://stackoverflow.com/questions/16200901/background-with-2-colors-in-javafx), but slightly different as that answer is for a TableView and not a TextArea. — jewelsea, Apr 14 '15 at 20:17
Is your text field a managed list of items (like a todo list), or is it freeform wrapping text like you find in a [TextArea](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/TextArea.html)? — jewelsea, Apr 14 '15 at 20:19
"How do I do " is too broad and never on-topic here. You are expected to research this and attempt to implement it on your own. If you have problems with the implementation that's when you ask for help here. — John Conde, Apr 14 '15 at 20:28

jewelsea · Accepted Answer · 2015-04-15T04:32:20.663

Approach

Create a lined linear gradient background for the content portion of a TextArea.

-jewelsea-lined-notepad:
    linear-gradient(
        from 0px 0px to 0px 11px,
        repeat,
        gainsboro,
        gainsboro 6.25%,
        cornsilk 6.25%,
        cornsilk
    );

Implementation Notes

The tricky part is having the lines in the linear gradient line up with the lines of text. I thought it would be a simple as specifying the gradient size as 1em (e.g. 1 measure of the font size per line), but that didn't allow the gradients to align. So I just specified the gradient in absolute pixel sizes (found by trial and error). Unfortunately, with this approach, as you change fonts or font sizes for the text area, you need to adjust the values in the gradient manually. But other than the sizing difficulty, it seems to work well.

References

JavaFX CSS Reference Guide.
modena.css - default JavaFX CSS stylesheet.

Sample Output

death and taxes

Sample Solution

Notepad.java

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Notepad extends Application {
    @Override
    public void start(Stage stage) {
        TextArea textArea = new TextArea();
        Label title = new Label(
                "Benjamin Franklin: Selected Quotes"
        );
        title.getStyleClass().add("title");

        VBox layout = new VBox(
                10,
                title,
                textArea
        );
        layout.setPadding(new Insets(10));
        VBox.setVgrow(textArea, Priority.ALWAYS);

        Scene scene = new Scene(layout);
        scene.getStylesheets().add(getClass().getResource(
                "notepad.css"
        ).toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

notepad.css

.root {
    -jewelsea-lined-notepad:
        linear-gradient(
            from 0px 0px to 0px 11px,
            repeat,
            gainsboro,
            gainsboro 6.25%,
            cornsilk 6.25%,
            cornsilk
        );
}

.title {
    -fx-font-size: 16px;
}

.text-area {
    -fx-font-family: "Comic Sans MS";
    -fx-font-size: 15px;
}

.text-area .content {
    -fx-background-color: -jewelsea-lined-notepad;
}

.text-area:focused .content {
    -fx-background-color:
        -fx-control-inner-background,
        -fx-faint-focus-color,
        -jewelsea-lined-notepad;
}

score 2 · Answer 2 · answered Apr 14 '15 at 22:12

You can achieve what you want by giving a lineargradient background to the text area and also specifying line-height and font size to play with the background and the respective text alignment.

The code snippet follows::

#container {
  margin: 0;
  padding: 0;
}
textarea {
  margin: 0;
  padding: 0 4px;
  height: 150px;
  width: 300px;
  position: relative;
  color: #444;
  line-height: 20px;
  border: 1px solid #d2d2d2;
  background: #fff;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#3b84aa), color-stop(4%, #f2e47c)) 0 0px
  /*4px*/
  ;
  background: -webkit-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  background: -moz-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  background: -ms-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  background: -o-linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  background: linear-gradient(top, #3b84aa 0%, #f2e47c 8%) 0 0px
  /*4px*/
  ;
  -webkit-background-size: 100% 20px;
  -moz-background-size: 100% 20px;
  -ms-background-size: 100% 20px;
  -o-background-size: 100% 20px;
  background-size: 100% 20px;
  box-shadow: 2px 2px 10px #3391fc;
}

<div id="container">
  <textarea name="">Have some text here. Blah. blah. blah</textarea>
</div>

You can find the fiddle link here

Hope this helps. Happy coding :)

@Yashar this answer should work in your JavaFX application if you load the html and associated CSS into a JavaFX [WebView](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/web/WebView.html). — jewelsea, Apr 14 '15 at 22:23

make text area like notepad JavaFX

2 Answers2

Linked