Paste the following function code at the page level (Function and Global Variable Declaration), or create a region in the Global Page using the Blank template. In that region, select Source and paste the function code enclosed within <script></script> tags. function setPostTextCounter (itemId) { var item = apex.item(itemId); var inputEl = item.element; var maxLen = inputEl.attr("maxlength") || 100; var curLen = item.getValue().length; var counterId = itemId + "_counter"; var postText = inputEl.siblings(".t-Form-itemText--post"); if (postText.length === 0) { postText = $('<span class="t-Form-itemText t-Form-itemText--post"></span>'); inputEl.after(postText); } if (postText.find("#" + counterId).length === 0) { postText.append('...
Oracle APEX's Universal Theme provides a modern and clean user experience through features like floating (above) labels for page items. These floating labels work seamlessly when users manually enter data, automatically moving the label above the field on focus or input. However, a common UI issue appears when page item values are set Dynamically the label and the value overlap, resulting in a broken and confusing user interface. once the user focuses the affected item even once, the label immediately corrects itself and displays properly. When an issue is reported, several values are populated based on a single user input, causing the UI to appear misaligned and confusing for the end user. Here, I'll share a few tips to fix this issue. For example, employee details are populated based on the Employee name. In this case, the first True Action is used to set the values, and in the second True Action, paste the following code setTimeout(function () { $("#P29_EMAIL,#P29_...