Badr At
Badr At

Reputation: 718

javaFX- how to place a textarea in the bottom of the screen

i am a beginner in javafx, so i am working on a chat app UI. i want to place a textarea in the bottom of the screen, and must stay in this position whatever the size of the screen.

this is my FXML file:

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXTextArea?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane fx:id="gridParent" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="550.0" prefWidth="750.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.bmi.client.AccueilController">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" maxWidth="228.0" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <AnchorPane fx:id="listePane" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #1D232A;" />
      <AnchorPane fx:id="convPane" prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="1">
         <children>
            <Pane fx:id="namePane" prefHeight="47.0" prefWidth="375.0" style="-fx-background-color: #b0b0b0;">
               <children>
                  <Label fx:id="nameLabel" layoutX="14.0" layoutY="15.0" />
               </children>
            </Pane>
            <JFXTextArea fx:id="messageArea" layoutY="482.0" prefHeight="68.0" prefWidth="375.0" promptText="Ecrire un message..." style="-fx-background-color: white; -fx-border-radius: 10px;"  />
         </children>
      </AnchorPane>
   </children>
</GridPane>

and this is a screenshot of the FXML File image

and when i resize the screen i get something like that: image2

Upvotes: 1

Views: 1361

Answers (1)

SedJ601
SedJ601

Reputation: 13859

Here is one way using an HBox as the root.

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXTextArea?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>

<HBox prefHeight="550.0" prefWidth="750.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane fx:id="listePane" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #1D232A;" />
      <VBox prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS">
         <children>
            <Pane fx:id="namePane" prefHeight="47.0" prefWidth="375.0" style="-fx-background-color: #b0b0b0;" VBox.vgrow="ALWAYS">
               <children>
                  <Label fx:id="nameLabel" layoutX="14.0" layoutY="15.0" />
               </children>
            </Pane>
            <JFXTextArea fx:id="messageArea" prefHeight="68.0" prefWidth="375.0" promptText="Ecrire un message..." style="-fx-background-color: white; -fx-border-radius: 10px;" />
         </children>
      </VBox>
   </children>
</HBox>

Upvotes: 1

Related Questions