Xpages Bootstrap Modal - how to make it draggable - xpages

Question

I am using bootstrapResponsiveConfiguration on
Domino Server: 9.0.1 FP6 with Ext Lib version - ExtensionLibraryOpenNTF-901v00_17.20160428-0214
The dialog control (Modal in bootstrap) is not draggable. How to make dialog control draggable?
<?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">
<xe:applicationLayout id="applicationLayout1">
<xp:panel>
<xp:button id="button1" styleClass="btn-primary" value="Show Dialog">
<i class="fa fa-user" />
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[//getComponent("dialog1").show();
XSP.openDialog("#{id:dialog1}")]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1" title="Dialog Title">
<xe:this.onShow>
<![CDATA[$(".xsp-responsive-modal").removeClass("xsp-responsive-modal").addClass("my-responsive-modal");]]>
</xe:this.onShow>
<xp:table>
<xp:tr>
<xp:td>
<xp:label value="Label"></xp:label>
</xp:td>
<xp:td>
<xp:inputText></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
<xe:dialogButtonBar>
<xp:button value="Cancel"></xp:button>
<xp:button value="Save" styleClass="btn-primary"></xp:button>
</xe:dialogButtonBar>
</xe:dialog>
</xp:panel>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:basicLeafNode label="Link 1"></xe:basicLeafNode>
<xe:basicLeafNode label="Link 2"></xe:basicLeafNode>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:bootstrapResponsiveConfiguration productLogo="/car.png"
placeBarName="New Application Name" placeBar="true" titleBar="false"
invertedNavbar="true" collapseLeftColumn="true"
collapseLeftMenuLabel="Menu Title" footer="false" legal="false">
<xe:this.bannerUtilityLinks>
<xe:loginTreeNode styleClass="logout"></xe:loginTreeNode>
<xe:basicLeafNode label="#{javascript:#UserName();}" styleClass="username"></xe:basicLeafNode>
</xe:this.bannerUtilityLinks>
<xe:this.placeBarActions>
<xe:basicLeafNode label="Link 1"></xe:basicLeafNode>
<xe:basicLeafNode label="Link 2"></xe:basicLeafNode>
</xe:this.placeBarActions>
</xe:bootstrapResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
</xp:view>
I have added the CSS inside the stylesheet, and included it in theme.:
.my-responsive-modal {
display: block;
width: auto;
left: 0;
top: 0;
z-index: 1050 !important;
}

Answer 1

The .xsp-responsive-modal class in xsp-mixin.css is using !important on the left and top properties preventing the modal from being draggable.
I worked around this by replacing the .xsp-responsive-modal class with my own class, .my-responsive-modal that does not use !important.
To replace the class I use the onShow event of the dialog:
<xe:this.onShow>
<![CDATA[
x$("#{id:dialog1}").removeClass("xsp-responsive-modal").addClass("my-responsive-modal");
]]>
</xe:this.onShow>
Here is the .my-responsive-modal class:
.my-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;
}
Note: the x$() function is a handy utility from Mark Roden to escape ':' in ids so that they work with JQuery (https://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages)