CODEWITHSUNDEEP
xpages
Prashant Arkal
Prashant Arkal

Reputation: 308

Xpages Bootstrap Modal - how to make it draggable

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>

When I preview, the screen looks like:

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;
    }

Upvotes: 0

Views: 340

Answers (1)

jpishko
jpishko

Reputation: 1070

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)

Upvotes: 5

Related Questions