Skip to main content

Fixing spacing issues and using helper classes

Archived

5 Tasks

40 mins

Pega Platform 8.5
Visible to: All users
Beginner Pega Platform 8.5 User Experience English
This content is now archived and is no longer updated. Progress is not calculated. Pega Cloud instances are disabled, and badges are no longer awarded.

Scenario

Spacing and alignment issues are common errors when building UI screens. It is important to address these issues because they can create an inconsistent experience for users. In this challenge, you are tasked with correcting typical issues around double spacing. Use your browser-based developer tools to identify the issues and then make the appropriate configuration changes to remove these alignments and spacing issues. Finally, you use some of the out-of-the-box helper classes provided in the UI-Kit.

The following table provides the credentials you need to complete the challenge.

Role User name Password
Application Developer author@mytown pega123!

Challenge Walkthrough

Detailed Tasks

1 Open the Tags landing page

  1. In the header of your workspace, click the Switch Studio menu.
  2. Select Dev Studio.
  3. Select Launch portal > Case Manager to open a secondary portal.
  4. Click Tags to open that landing page.
  5. Using the developer tools, identify a case of double margin and spacing issues. Right-click on the screen, and then click Inspect or press F12 to inspect.
    Looking for double spacing issues
  6. Click the Toggle runtime toolbar icon and then click the Toggle Live UI icon to open the section pyTagDashboardNavigation. 
  7. Select the section, and then click the Open in Dev Studio icon.
    Navigation_pyTagDashboard
  8. Navigate to the Dev Studio portal.
  9. Click Private Edit, then click Continue with private edit.
Note: The parent layout is using a Default container format which adds padding and margin. In this case, this is not required because the top-level section is already using a Default container. This is the case where two nested Default containers introduce double padding.
  1. Select the Dynamic Layout Stacked - 1 section header, and then click the View properties icon.
  2. Click the Presentation tab.
  3. Select Optimize layout, markup, and CSS with new releases.
    OptimiseCodeSelection
  4. Click the General tab.
  5. In the Container format list, select None.
    ContainerNone
  6. Click Submit,
  7. Click Save.
  8. Go back to the Case Manager portal, refresh the browser, and review the changes made on the Tags page.
    AfterFix_MarginAndSpacing

2 Fix the bottom spacing issue

  1. Using your browser-based developer tools, identify the remaining bottom spacing issue. Right-click on the screen and then click Inspect or press F12 to inspect.
    Bottom spacing issue is still present
  2. Click the Toggle runtime toolbar icon and then click the Toggle Live UI icon to open the section pyTagDashboard.
  3. Select the section and then click the Open in Dev Studio icon.
  4. Navigate to the Dev Studio portal.
  5. Click Private Edit, and then click Continue with private edit.
Note: This section uses four dynamic layouts where only one layout is needed.
  1. Select the Dynamic Layout (Default) - 1.3 section, and then click the Delete selected layout or row icon.
    select and delete the layout
  2. After deleting the Dynamic Layout (Default) - 1.3 section, move the sections referenced in dynamic layouts that is, Dynamic Layout (Default) - 1.1 and 1.2 until you are left with just Dynamic Layout (inline grid 30 70) -1
    MoveSections
  3. In the Dynamic Layout (Inline grid 30 70) -1 section, click the View Properties icon.
  4. Click the Presentation tab.
  5. Select Optimize layout, markup, and CSS with new releases.
  6. Scroll down to the spacing properties.
  7. For the Top and Bottom properties, select the option of All Items.
  8. Click Submit
    TopAndBottomAllItems
Note: The section resembles the following image after these changes are made.
FinalScreen
  1. Go back to the Case Manager portal, refresh the browser, and review the changes made on the Tags page.
    tags page is improved after these changes

3 Add more improvements

  1. Using your browser-based developer tools, continue to edit the section to improve the UI. Right-click on the screen and then click Inspect or press F12 to inspect.
    UI improvements
  2. Use developer tools to identify how to remove some of the unneeded spacing - use the helper class border-l-standard to create the separator between the filter.
  3. Access the Case Manager portal.
  4. In the No tag selected area, click View Properties.
  5. Click the Presentation tab, then select the Display advanced presentation options check box.
  6. For the Cell read-write classes option, click the Open helper class picker icon.
  7. Search for and select border-I-standard option.
  8. Click Submit.
  9. Copy and select the border-I-standard option into the Cell read-only classes option field.
  10. Click Submit.
  11. Click Save.
  12. Go back to the Case Manager portal, refresh the browser, and review the changes made on the Tags page. 
Note: Watch the video if you are not able to get to the required outcome. 

4 Fix space between flex items

  1. Using your browser-based developer tools, identify the remaining bottom spacing issue. Right-click on the screen and then click Inspect or press F12 to inspect.
    SpaceBetweenFlexItems
  2. Open the pyTagDashboard section, which is already opened in Dev Studio. 
  3. Select the Dynamic Layout (Inline grid 30 70) -1 section, and then click the View Properties icon. 
  4. Click the Presentation tab and scroll down to the spacing properties. 
  5. For the Left and Right properties, select All Items.
  6. Click Submit.
  7. Click Save
  8. Go back to the Case Manager portal, refresh the browser and review the changes made in the Tags page.
    AfterFix_SpaceBetweenFlexItems

5 Expand the size of search tag

  1. Click the Toggle runtime toolbar icon, and then click the Toggle Live UI icon to open the section pyTagDashboardNavigation. 
    Navigation_pyTagDashboard
  2. Select the section, and then click the Open in Dev Studio icon. 
  3. Navigate to the Dev Studio portal. 
  4. In the Search tag box, click View Properties. 
  5. Click the Presentation tab.
  6. In the Advanced presentation options section, ensure that, in the Cell read-write classes and Cell read-only classes lists, the flex-grow-1 helper class is selected. 
    CellReadWriteHelperClass
  7. Select the Dynamic Layout (Inline Middle) – 1.1, and then click the View Properties icon
  8. Click the Presentation tab.
  9. Clear the Set layout width to auto check box.
  10. Click Submit.
  11. Click Save. 
    Uncheckbox
  12. Go back to the Case Manager portal, refresh the browser, and review the changes made on the Tags page.
    FinalScreen1


Available in the following mission:

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice