Resize TextField On Button Click

Question

I am trying to resize a TextField, when startBtnClick is clicked and I can't seem to get it to work. Basically I want to shrink the field by 110 units when the button is clicked.

On Action Event:

@FXML
protected void startBtnClick(){
    double txtWidth = this.url.getWidth();
    this.url.setPrefWidth(txtWidth - 110);
}

The XML:

<?xml version="1.0" encoding="UTF-8"?>
<AnchorPane fx:id="anchorPane" minHeight="200.0" minWidth="200.0" prefHeight="600.0" prefWidth="1200.0" styleClass="anchor-pane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="phantom.FXMLDocumentController">
    <children>
        <Button id="beginSurfing" fx:id="quitSurfing" mnemonicParsing="false" onAction="#stopSurfing" prefHeight="29.0" prefWidth="93.00009999999747" text="Quit Surfing" visible="false" AnchorPane.rightAnchor="9.0" AnchorPane.topAnchor="8.0" />
        <GridPane prefHeight="600.0" prefWidth="1200.0" style="" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <children>
                <AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="0" GridPane.rowIndex="0">
                    <children>
                        <TextField fx:id="url" disable="false" onAction="#urlGo" opacity="1.0" prefWidth="965.0" scaleZ="1.0" style="" translateZ="0.0" AnchorPane.leftAnchor="122.0" AnchorPane.rightAnchor="113.0" AnchorPane.topAnchor="9.0">
                            <stylesheets>
                                <URL value="@../CSS/textField.css" />
                            </stylesheets>
                        </TextField>
                        <Button id="beginSurfing" fx:id="startSurfing" mnemonicParsing="false" onAction="#beginSurfing" prefHeight="29.0" prefWidth="93.00009999999747" text="Start Surfing" AnchorPane.rightAnchor="12.0" AnchorPane.topAnchor="9.0" />
                        <Label fx:id="timer" alignment="CENTER" contentDisplay="CENTER" prefHeight="29.0" prefWidth="94.0" text="" textAlignment="CENTER" underline="false" AnchorPane.rightAnchor="11.0" AnchorPane.topAnchor="9.0">
                            <font>
                                <Font name="System Bold" size="20.0" />
                            </font>
                        </Label>
                        <Button id="beginSurfing" fx:id="nextAdBtn" mnemonicParsing="false" onAction="#nextAd" prefHeight="30.000099999997474" prefWidth="94.0" text="Next Ad" visible="false" AnchorPane.rightAnchor="12.0" AnchorPane.topAnchor="8.0" />
                    </children>
                </AnchorPane>
                <!--
                    The rest of the gird
                    Chopped off for readability
                -->
            </children>
        </GridPane>
    </children>
</AnchorPane>

Answer 1

Since your Button is in an AnchorPane and you have both the left and right anchors set, the width is going to be controlled by those anchors, not by the prefWidth property. An AnchorPane is probably not the best way to go if you want to be able to dynamically resize the control, but you can do

AnchorPane.setRightAnchor(url, AnchorPane.getRightAnchor(url)+110);