How to increase inline dialog size in Oracle APEX Universal Theme

There are three predefined inline dialog sizes in UT.

Sometimes developer needs inline dialog with custom sizes, for example, large than largest of theme predefined. If you use Universal Theme,  the simplest way how to increase inline dialog is to add some css to inline dialog region definition:

In this example 800 is required dialog width in pixels, 540 – height respectively.


Open Inline Dialog and Close Inline Dialog in Oracle Apex

Questin : Open Inline Dialog and Close Inline Dialog in Oracle Apex
Answer :

  1. Create New region
  2. Select the Region — > Go to the template and select the inline dialog type
  3. Create the button (openModal) for other region, because when you are click the openModal button it will open the inline dialog within the page.
  4. Select the Inline dialog region and put the Unique STATIC ID in Advance property
  5. Now write the code for open modal dialog
  6. Select the Open modal button and select the Behavior –> Select the Redirect URL in the list and paste the below code
  7. javascript:openModal(‘GENERATE_BOOKING’);
  8. GENERATE_BOOKING is the static id for inline dialog region
  9. Save and run the page now the inline dialog will open
  10. Create the close button for inline dialog region and select the button behavior — > and select the redirect url from the list and paste the below code
  11. javascript:closeModal(‘GENERATE_BOOKING’);

Please try the code and provide your comments here.

Auto-convert field to uppercase

style="text-transform: uppercase;" onKeyUp="this.value=this.value.toUpperCase();"

This is the simple method, please copy the code and paste into custom attributes and then run the page.

This is just a quick note for my future reference. I needed all items with the class “uppercase” to be converted to uppercase, and I thought it would work with just some CSS:

.uppercase { text-transform:uppercase; }

This makes the items appear uppercase, but when the page is posted it actually sends the values exactly as the user typed. They’d type in “lower“, it looks like “LOWER” on screen, but gets posted as “lower“.

In many cases I could just convert the value in my PL/SQL code, but in cases where I was using Apex tabular forms, I don’t know a simple way to intercept the values before the insert occurs.

To solve this I added this to the page’s Execute when Page Loads:

//the item looks uppercase but the internal value
//is still lowercase
var i = "#" + $(this).attr("id");
$(i).val( $(i).val().toUpperCase() );

Or, even better, add this to the application’s global javascript file:

$(document).ready(function() {
var i = "#" + $(this).attr("id");
$(i).val( $(i).val().toUpperCase() );