Xpages Bootstrap Modal - how to make it draggable

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

jpishko · Answer 1 · 2016-08-03T13:41:45.657

5

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)

edited Aug 03 '16 at 13:41

answered Aug 03 '16 at 12:43

jpishko

1,070
1
10
19

Thank you. This is working. But the issue now is dialog box is opening at right bottom corner instead of opening in center aligned. – Prashant Arkal Aug 04 '16 at 02:50
Can you post the code you are using to open the dialog? I have been using `XSP.openDialog(dialogID)` and it center aligns for me. – jpishko Aug 04 '16 at 10:59
I have posted the code and screen capture that I am getting. previously, I was using SSJS to open the dialog - getComponent("dialog1").show(). After using your cold to open dialog, it shows same. – Prashant Arkal Aug 05 '16 at 08:41
Ok I see. I'm not sure how you would go about fixing that other than using another JQuery hack like this: http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen – jpishko Aug 05 '16 at 12:09
Any other options than fixing with CSS? With this option dragging is not so smoot. – Prashant Arkal Aug 05 '16 at 16:49
You could try using the new Bootstrap3_blank theme in version 17 of the extension library. If you look at the example on how to use this: https://wiki.openntf.org/display/EXTLIB/How+to+use+the+Bootstrap3_blank.theme+in+XPages - you can see that they are manually adding the xsp-mixin.css file in the theme so I imagine you could replace this with your own version of that file that does not contain !important in the xsp-responsive-modal class. – jpishko Aug 05 '16 at 17:43

Xpages Bootstrap Modal - how to make it draggable

1 Answers1