Format the component containers for different screen sizes

Introduction

In this tutorial, you will learn how to customize an Oracle JavaScript Extension Toolkit (Oracle JET) virtual DOM app to support different screen sizes by using Oracle JET helper classes.

You can use Oracle JET helper classes to set conditions for various screen sizes. In a flex layout, an item in a container grows or shrinks to fill the container space. Oracle JET provides style classes for small, medium, large, and extra-large screen sizes. You can set the minimum screen width allocated for content by specifying the number of logical columns from 1 to 12 that the content should use for the selected screen size. If you choose a screen size but omit a larger screen-size condition, then the condition applies to the selected screen size and to all larger screen sizes. If you choose a screen size while specifying the keyword only in the condition, then the condition applies only to that screen size. By using helper classes in your virtual DOM app, you can control the display and alignment of text and elements, customize padding around panels, and set columns for different screen sizes.

The screen sizes are divided logically into 12 columns

Description of the illustration screen_sizes.png

Objectives

In this tutorial, you will add helper classes to your virtual DOM app to specify text alignment, add padding to panels, and set columns for different screen sizes.

Prerequisites

A development environment set up to create Oracle JET virtual DOM apps that includes an installation of Node.js
Google Chrome web browser installed and set as the default web browser
Access to the Oracle JET Developer Cookbook
Completion of the previous tutorial in this learning path, Add Containers to the Oracle JET Virtual DOM App

Task 1: Add a Helper Class for Content Alignment

Modify the positioning of content in the Activity Container component by specifying an Oracle JET helper class in the div element to adjust content alignment when using a small screen size.

Open the Oracle JET Cookbook and click Framework in the menu bar. Then click CSS Utilities, click Layout, and select the Text End demo in the sidebar.
In the Oracle JET Cookbook demo for Text End, learn how you can implement the oj-sm-only-text-align-end styling class to align text content to the end of a small screen. To demo a small screen, click the Phone Portrait icon and view the responsive behavior for S align end.
Navigate to the JET-Virtual-DOM-app/src/components/Activity directory and open the ActivityContainer.tsx file in an editor.
In the ActivityContainer function definition, find the div where id="activitiesContainer" and add the oj-sm-only-text-align-end responsive helper style class.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
```
Save and close the file.

Task 2: Add Helper Classes for Padding

Add padding to the Parent Container 2 component and its child components, the Activity Item Container and Item Detail Container, by using Oracle JET responsive spacing style classes. When you specify a responsive spacing class on a parent div element, the padding style is applied to all child div elements of that parent.

Open the Oracle JET Cookbook and click Framework in the menu bar. Then click CSS Utilities, click Margins & Padding, and select the Responsive Spacing demo in the sidebar.
In the Oracle JET Cookbook demo for Responsive Spacing, learn how you can implement the responsive spacing classes to add padding to containers at various screen sizes.
Navigate to the JET-Virtual-DOM-app/src/components directory and open the ParentContainer2.tsx file in an editor.
In the ParentContainer2 function definition, find the div where id="parentContainer2" and add the oj-lg-padding-6x-horizontal responsive spacing class.
```
<div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal">
```
Navigate to the JET-Virtual-DOM-app/src/components/Activity directory and open ActivityContainer.tsx in an editor.
In the ActivityContainer function definition, find the div where id="activitiesContainer" and add the oj-sm-padding-4x-start responsive spacing class.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start">
```
Navigate to the JET-Virtual-DOM-app/src/components/ActivityItem directory and open ActivityItemContainer.tsx in an editor.
In the ActivityItemContainer function definition, find the div where id="activityItemsContainer" and add the oj-sm-padding-4x-start responsive spacing style class.
```
<div  id="activityItemsContainer"
      class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start">
```
Navigate to the JET-Virtual-DOM-app/src/components/ItemDetail directory and open ItemDetailContainer.tsx in an editor.
In the ItemDetailContainer function definition, find the div where id="itemDetailsContainer" and add the oj-sm-padding-4x-start responsive spacing style class.
```
<div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start">
```
Save and close the open files.

Task 3: Set Columns for Different Screen Sizes

Specify Oracle JET grid layout style classes in the components’ container div elements. These style classes allow you to set the minimum column width that is allocated for the containers in the specified screen size.

Open the Oracle JET Cookbook and click Layout & Nav in the menu bar. Then click Grid and select the Basic demo in the sidebar.
In the Oracle JET Cookbook demo for the responsive grid layout classes, learn about the concept of a 12-column grid and how you can implement these style classes to add responsive behavior for different screen sizes to your virtual DOM app.
Navigate to the JET-Virtual-DOM-app/src/components/Activity directory and open the ActivityContainer.tsx file in an editor.
In the ActivityContainer function definition, find the div where id="activitiesContainer" and add the oj-md-4 and oj-sm-12 sizing style classes that specify the minimum number of columns for different screen sizes.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start oj-md-4 oj-sm-12">
```
The class oj-sm-12 makes the div container 12 columns wide in a small screen, and oj-md-4 makes the div container four columns wide when in medium or larger screen sizes.

Save the file. Your code should look similar to activity-container-tsx.txt.
Navigate to the JET-Virtual-DOM-app/src/components/ActivityItem directory and open ActivityItemContainer.tsx in an editor. In the div where id="activityItemsContainer", add the oj-md-6 and oj-sm-12 style classes.
```
<div id="activityItemsContainer"
     class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
```
Save the file. Your code should look similar to activity-item-container-tsx.txt.
Navigate to the JET-Virtual-DOM-app/src/components/ItemDetail directory and open ItemDetailContainer.tsx in an editor. In the div where id="itemDetailsContainer", add the oj-md-6 and oj-sm-12 style classes.
```
<div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
```
Save the file. Your code should look similar to item-detail-container-tsx.txt.
From the JET-Virtual-DOM-app/src/components directory, open ParentContainer2.tsx in an editor. In the div where id="parentContainer2", add the oj-md-8 and oj-sm-12 style classes.
```
<div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal oj-md-8 oj-sm-12">
```
Save the file. Your code should look similar to parent-container2-tsx.txt.

Task 4: Run the Virtual DOM App

In the terminal window, change to the JET-Virtual-DOM-app directory and run the virtual DOM app.
```
npx ojet serve
```
Oracle JET tooling runs your virtual DOM app in your local web browser.
Right-click the page and select Inspect to bring up the page view in the developer tools.
In the Chrome DevTools toolbar, click to switch to the device mode.

Description of the illustration device_mode_lens.png
Then select a device with a small screen size, such as the Pixel 7, from the Dimensions dropdown menu to verify the content alignment changes of the activities list and header in the Activity Container component.

Description of the illustration content_alignment.png
Close the browser window or tab that displays your running virtual DOM app.
In the terminal window, press Ctrl+C, and if prompted, enter y to exit the Oracle JET tooling batch job.

Next Step

To proceed to the next tutorial in this learning path, click here.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.

Title and Copyright Information

Format the component containers for different screen sizes

F72922-02

February 2024