How to Wrap Heading and Column Text in Oracle APEX Interactive Grid
In this video, we will learn how to make an Interactive grids heading and column text wrap.
Inline CSS
========================================================
/* Custom CSS to apply styles to all Interactive Grids with the class 'cef-db-ig' */
.myClass .a-GV-header {
height: 100px; /* Adjust the height */
line-height: 50px; /* Ensure text is vertically centered */
padding: 5px; /* Adjust padding as needed */
white-space: normal; /* Allow wrapping */
overflow-wrap: break-word; /* Break long words */
word-wrap: break-word; /* Break long words */
}
.myClass .a-GV-header .a-GV-headerLabel {
white-space: normal; /* Allow wrapping */
overflow-wrap: break-word; /* Break long words */
word-wrap: break-word; /* Break long words */
height: auto; /* Adjust the height automatically */
line-height: 1.2; /* Adjust line height for better readability */
padding: 5px; /* Optional: Adjust padding as needed */
}
/* Custom CSS to wrap the column values and align at the top in the Interactive Grids with the class 'cef-db-ig' */
.myClass .a-GV-widgets-cell {
white-space: normal; /* Allow wrapping */
word-wrap: break-word; /* Break long words */
overflow-wrap: break-word; /* Break long words */
vertical-align: top; /* Align content at the top */
}
.myClass .a-GV-cell {
white-space: normal; /* Allow wrapping */
word-wrap: break-word; /* Break long words */
overflow-wrap: break-word; /* Break long words */
vertical-align: top; /* Align content at the top */
padding: 5px; /* Optional: Adjust padding for better spacing */
}
