Introduction:

    In Oracle APEX, when dealing with dynamic or lengthy data, the default behavior of column headers and cell contents may not always provide the best user experience, especially when the text overflows or runs out of view. By applying custom CSS to Interactive Grids, you can modify the appearance of the grid elements, such as column and cell text, allowing the content to wrap and display correctly. This ensures that all data is readable and well-organized within the grid of your application

Why Do We Need It:      

  • Improved Readability: When dealing with long column headers or data values, text wrapping helps ensure that the content fits within the available space, without being cut off or causing horizontal scrolling.

 

  • Better User Experience: By allowing text wrapping, users can more easily read and interact with the content without having to resize columns or scroll excessively.

 

  • Responsive Design: Interactive Grids are part of responsive applications. Custom CSS that allows wrapping makes sure that content adapts properly to different screen sizes, ensuring that the grid remains usable on mobile devices or smaller screens.

 

How do we solve:

 Step 1: Create an Interactive grid 

Create an Interactive grid in a page using a table

  Step 2: Create CSS

                    Go to Inline CSS in the page, and customize the text using the query below given

 

CSS Code:

.myClass .a-GV-header {

height: 100px;

line-height: 50px;

padding: 5px;

white-space: normal;

overflow-wrap: break-word;

word-wrap: break-word;

}

.myClass .a-GV-header .a-GV-headerLabel {

white-space: normal;

overflow-wrap: break-word;

word-wrap: break-word;

height: auto;

line-height: 1.2;

padding: 5px;

}

.myClass .a-GV-widgets-cell {

white-space: normal;

word-wrap: break-word;

overflow-wrap: break-word;

vertical-align: top;

}

.myClass .a-GV-cell {

white-space: normal;

word-wrap: break-word;

overflow-wrap: break-word;

vertical-align: top;

padding: 5px;

}

 

Step 3: Give Custom Attributes:

In Interactive Report, go to advance in that give custom attributes as ‘class=”myClass”’ to identify the inline CSS for wrap text and column.

Conclusion

 Customizing text wrapping in Oracle APEX Interactive Grids enhances readability, user experience, and responsiveness. By applying the provided CSS, you ensure that both column headers and cell content are displayed clearly, improving the overall functionality and visual appeal of your grid. These adjustments help create a more user-friendly and professional application.

Recent Posts

Start typing and press Enter to search