JavaFX: Padding and Spacing

This entry is part 15 of 55 in the series JavaFX

Padding and Spacing are commonly used in HTML/CSS design to layout the elements in a page.

When it comes to JavaFX, we use padding and spacing just as we were using them in HTML/CSS.

Consider the earlier example where we have the 2 lines below.

vbox.setPadding(new Insets(10)); // Set all sides to 10
vbox.setSpacing(16); // Gap between nodes

When we apply padding and spacing to Vbox, we are actually applying them to all elements in the Vbox.

In the below example, we are applying them to both the title and the list.

The best way for us to see the difference is to modify the values on both of the statements.

package javafxapplication9;
 
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.control.ListView;
import javafx.stage.Stage;
 
public class JavaFXApplication9 extends Application {
 
    @Override
    public void start(Stage stage) {
 
        BorderPane border = new BorderPane();
 
        border.setPrefSize(500, 400);
 
        border.setLeft(addVBox());
 
        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Layout Sample");
        stage.show();
    }
 
    private VBox addVBox() {
 
        VBox vbox = new VBox();
        vbox.setPadding(new Insets(10)); // Set all sides to 10
        vbox.setSpacing(16);              // Gap between nodes
 
        Text title = new Text("Top 5 Rock Albums");
        title.setFont(Font.font("Arial", FontWeight.BOLD, 14));
        vbox.getChildren().add(title);
 
        ListView<String> list = new ListView<String>();
        ObservableList<String> items = FXCollections.observableArrayList(
                "Like A Rolling Stone", "Archtung Baby", "Help!", "Smell Like Teen Spirit", "Hotel California");
        list.setItems(items);
 
        vbox.getChildren().add(list);
 
        return vbox;
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

padding

 

HTML Table: Table cell padding and spacing

This entry is part 15 of 16 in the series HTML Table

Cell padding, cell spacing are 2 different ways we can control how cell content displays on a page.

  • Padding refers to the amount of space between an element’s content and its out edge.
  • Spacing refers to the amount of space between the outside of an element and the adjacent element.

We first look at an example without padding and spacing.

Without Padding and Spacing
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
    <style>
        table {
            width: 60%;
            border-style: solid;
            border-width: 1px;
        }

        td {
            border-style: solid;
            border-width: 1px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>

To set the padding for the entire table, we use padding: 10px.

To set the cell spacing, we use border-spacing: 10px.  We look at the effects of using padding and spacing in the following example.

With Padding & Spacing
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
    <style>
        table {
            width: 60%;
            border-style: solid;
            border-width: 1px;
            padding: 5px;
            border-spacing: 10px;
        }

        td {
            border-style: solid;
            border-width: 1px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>

 

CSS: Applying padding to the 4 sides of the element

This entry is part 19 of 26 in the series Basic CSS

By default margin and padding attributes apply to all four sides of an element.

You can add top, right, bottom and left arguments to restrict formatting to one or more specific sides.

<style>
        #padding {
            padding-left: 40px;
            padding-top: 30px;
            padding-right: 20px;
            padding-bottom: 10px;
            border: 1px solid;
        }
</style>

We can also use % as the unit of the measurement.

jQuery Mobile: Adding padding to popup

This entry is part 62 of 73 in the series jQuery Mobile

In the previous example, we have used the class=’ui-content’ to add 15px to the padding of the popup.

This is also illustrated in this example.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Popup App</h1>
    </div>

    <div data-role='content'>
        <a href='#popupPadded' data-rel='popup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline'>Popup with padding</a>
        <div data-role='popup' id='popupPadded' class='ui-content'>
            <p>This is a popup with the <code>ui-content</code> class added to the popup container.</p>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code