Thursday, March 6, 2014

ADF Mobile - Popup at center of the window

Sometimes you may want to position amx:popup at the center of the window. At this moment, in 11.1.2.4.0 there is no declarative solution for this usecase, In this post I'm sharing a code snippet that I noticed from Denis Tyrell(Oracle) for the same.

You can align the amx:showPopupBehavior with overlapTop property, this indicates how the popup should be aligned relative to the panelPage and then in the amx:popup code you can set the inlineStyle as below:
<amx:popup id="p1" autoDismiss="true"
     inlineStyle="position:relative;margin-top:#{(deviceScope.hardware.screen.availableHeight-200)/2}px;margin-left:#{(deviceScope.hardware.screen.availableHeight*10)/100}px;margin-right:#{(deviceScope.hardware.screen.availableHeight*10)/100}px;width:#{deviceScope.hardware.screen.availableWidth};height:200px;">
    <amx:outputText value="Popup at center of the window" id="ot4"/>
</amx:popup>
Application screen looks like below when it deployed to IOS simulator.

9 comments:

  1. awesome post i really like this post.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thank you, it was so helpfull.


    Deepak,
    Can you please mention how to invoke a popup from java.
    Now i am using 'amx:showPopupBehavior' in the amx page.



    Thanks,
    Anish Michael

    ReplyDelete
  4. Nice post!

    Worried About QuickBooks Error ?Get in touch with QuickBooks expert for instant solution.
    Click Here to know how to fix QuickBooks Error 15240

    Dial on QuickBooks Error Support Number +1-855-977-7463.

    ReplyDelete
  5. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. Great work
    cyber security course malaysia

    ReplyDelete