How to change JavaFX TabPane pane type

Question

I want to make a WebView inside an AnchorPane controlled by the TabPane:

Here's the TabPane hierarchy in this:

I don't know how to make a WebView fill the entire area, and be responsive at the same time. I can change the preferred size, but I don't know how to make it 100% fill the pane. I'm brand new to JavaFX, and I am using the Scene Builder (I came from Swing). Thank you!

Answer 1

A tab will size its content node to fill all the available space in the tab (up to its max size). So as long as you leave the max width and max height of a web view as their defaults (Double.MAX_VALUE), you can simply place the web view directly in the tab without using an anchor pane, and it will be sized to the full size of the tab.

Here is a simple example:

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

<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.TabPane?>


<TabPane xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <tabs>
      <Tab text="Untitled Tab">
         <content>
            <WebView fx:id="webView" prefHeight="200.0" prefWidth="200.0" />
         </content>
      </Tab>
   </tabs>
</TabPane>

Here is the document hierarchy in Scene Builder: