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.

6 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