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>

• diegoaguilar: I think setPrefWidth isn't the right method. I will test and answer
• Nico: Not completely related but may give you clues: stackoverflow.com/questions/20304933/…
• zgc7009: You need to set the layout parameters of the button, not just the preferred values. Android can (and often does) overrides your preferred values for the sake of efficiency and stability.
• James_D: Which layout pane are you using?
• Get Off My Lawn: I am using JavaFX Scene Builder

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