Format the containers for different screen sizes

Introduction

In this tutorial, you will learn how to customize an Oracle JET web 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 while specifying the keyword only in the condition, then the condition applies only to that 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 the subsequent larger screen sizes. By using helper classes in your 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 Oracle JET web app to specify text alignment, add padding to panels, and set columns for different screen sizes.

Prerequisites

Task 1: Add Helper Classes for Content Alignment

Modify the alignment of content in the Oracle JET web app’s layout by specifying helper classes for different screen sizes in the div element.

  1. 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.

  2. 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.

  3. Navigate to the JET_Web_Application/src/ts/views directory and open the dashboard.html file in an editor.

  4. Find the div element where id="activitiesContainer", before the Activities heading, and then add the oj-sm-only-text-align-end Oracle JET responsive helper style class.

    <!-- The responsive helper style class aligns the Activities container text to the
 end of the screen when the screen size is small -->
<div
  id="activitiesContainer"
  class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end"
>
  <h3 id="activitiesHeader">Activities</h3>
</div>

    The oj-sm-only-text-align-end style class aligns the contents in the container to the end of the screen width only if the screen size is small.

  5. Save the dashboard.html file.

    Your code should look similar to content-alignment-dashboard-html.txt.

Task 2: Add Helper Classes for Padding

Add padding to the content by using the Oracle JET responsive spacing style classes. When you specify the responsive spacing class on the parent div element, the padding is applied to all child div elements of that parent.

  1. Find the div element where id="parentContainer2" and add the oj-lg-padding-pad-6x Oracle JET responsive spacing style class.

    <!-- The style class is specified in the parent div element -->
<div
  id="parentContainer2"
  class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x"
></div>

  2. Save the dashboard.html file.

    Your code should look similar to padding-dashboard-html.txt.

Task 3: Set Columns for Different Screen Sizes

In the Oracle JET web app, specify the sizing style classes in the div element. These Oracle JET style classes allow you to set the minimum column width that is allocated for the specified screen size.

  1. Find the div element where id="activitiesContainer", before the Activities heading, and add the style classes that specify the minimum number of columns for different screen sizes.

    <!-- The oj-md-4 and oj-sm-12 style classes specify the column width for small and medium screen sizes -->
<div
  id="activitiesContainer"
  class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-md-4 oj-sm-12"
>
  <h3 id="activitiesHeader">Activities</h3>
</div>

    The style 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 above screen sizes.

  2. Find the div elements surrounding the Item Details heading, which have id attributes with the values parentContainer2, activityItemsContainer, and itemDetailsContainer. Then add the following style classes to them to specify their minimum column width for different screen sizes.

    <!-- The style class in the div elements specifies the column width for different screen sizes -->
<div
  id="parentContainer2"
  class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12"
>
  <div
    id="activityItemsContainer"
    class="oj-flex-item oj-md-6 oj-sm-12"
  ></div>
  <div
    id="itemDetailsContainer"
    class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12"
  ></div>
</div>

  3. Save the dashboard.html file. Your code should look similar to final-columns-dashboard-html.txt.

Task 4: Run the Web App

  1. In the terminal window, change to the JET_Web_Application directory and run the app.

    npx ojet serve

    Oracle JET tooling runs your web app in your local web browser, where you can view the Dashboard contents. Right-click the page, and select Inspect to bring up the page view in the developer tools. Then select a device with a small screen size, such as Pixel 7, from the Dimensions dropdown menu to verify the content alignment changes of the Activities list items.

    The responsive layout on a small screen

    Description of the illustration content-alignment.png

  2. Close the browser window or tab that displays your running web app.

  3. 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.