Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make the dialog control from extension library draggable again
xsp:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.resources>
<xp:script src="/functions.js" clientSide="true" />
<xp:styleSheet href="/bootstrap.css" />
</xp:this.resources>
<div class="panel">
<xp:button value="Show me the modal..." id="button1"
styleClass="btn btn-info">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var c = getComponent("dialog1")
c.show()}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</div>
<xe:dialog id="dialog1" title="Draggable modal">
<xe:this.onShow>
<![CDATA[
x$("#{id:dialog1}").removeClass("xsp-responsive-modal").addClass("draggable-responsive-modal");
]]>
</xe:this.onShow>
<div class="alert alert-info">
<strong>Drag me, Baby!</strong>
&#160; Drag! Drag! Drag!
</div>
</xe:dialog>
</xp:view>
css:
.draggable-responsive-modal { /* copy of .xsp-responsive-modal with important removed from left and top to enable dragging in xe:dialog */
display: block;
width: auto;
left: 0;
top: 0;
z-index: 1050 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.