Xpages Bootstrap Modal - wie man es machen ziehbar

Question

I bootstrapResponsiveConfiguration auf Domino Server bin mit: 9.0.1 FP6 mit Ext Lib Version - ExtensionLibraryOpenNTF-901v00_17.20160428-0214

Die Dialogsteuerung (Modal in Bootstrap) ist nicht ziehbar. Wie kann die Dialogsteuerung ziehbar gemacht werden?

<?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"> 
 
\t <xe:applicationLayout id="applicationLayout1"> 
 
\t \t <xp:panel> 
 
\t \t \t <xp:button id="button1" styleClass="btn-primary" value="Show Dialog"> 
 
\t \t \t \t <i class="fa fa-user" /> 
 
\t \t \t \t <xp:eventHandler event="onclick" submit="false"> 
 
\t \t \t \t \t <xp:this.script><![CDATA[//getComponent("dialog1").show(); 
 
XSP.openDialog("#{id:dialog1}")]]></xp:this.script> 
 
\t \t \t \t </xp:eventHandler> 
 
\t \t \t </xp:button> 
 
\t \t \t <xe:dialog id="dialog1" title="Dialog Title"> 
 
\t \t \t \t <xe:this.onShow> 
 
\t \t \t \t \t <![CDATA[$(".xsp-responsive-modal").removeClass("xsp-responsive-modal").addClass("my-responsive-modal");]]> 
 
\t \t \t \t </xe:this.onShow> 
 
\t \t \t \t <xp:table> 
 
\t \t \t \t \t <xp:tr> 
 
\t \t \t \t \t \t <xp:td> 
 
\t \t \t \t \t \t \t <xp:label value="Label"></xp:label> 
 
\t \t \t \t \t \t </xp:td> 
 
\t \t \t \t \t \t <xp:td> 
 
\t \t \t \t \t \t \t <xp:inputText></xp:inputText> 
 
\t \t \t \t \t \t </xp:td> 
 
\t \t \t \t \t </xp:tr> 
 
\t \t \t \t </xp:table> 
 
\t \t \t \t <xe:dialogButtonBar> 
 
\t \t \t \t \t <xp:button value="Cancel"></xp:button> 
 
\t \t \t \t \t <xp:button value="Save" styleClass="btn-primary"></xp:button> 
 
\t \t \t \t </xe:dialogButtonBar> 
 
\t \t \t </xe:dialog> 
 
\t \t </xp:panel> 
 
\t \t <xp:this.facets> 
 
\t \t \t <xe:navigator id="navigator1" xp:key="LeftColumn"> 
 
\t \t \t \t <xe:this.treeNodes> 
 
\t \t \t \t \t <xe:basicLeafNode label="Link 1"></xe:basicLeafNode> 
 
\t \t \t \t \t <xe:basicLeafNode label="Link 2"></xe:basicLeafNode> 
 
\t \t \t \t </xe:this.treeNodes> 
 
\t \t \t </xe:navigator> 
 
\t \t </xp:this.facets> 
 
\t \t <xe:this.configuration> 
 
\t \t \t <xe:bootstrapResponsiveConfiguration productLogo="/car.png" 
 
\t \t \t \t placeBarName="New Application Name" placeBar="true" titleBar="false" 
 
\t \t \t \t invertedNavbar="true" collapseLeftColumn="true" 
 
\t \t \t \t collapseLeftMenuLabel="Menu Title" footer="false" legal="false"> 
 
\t \t \t \t <xe:this.bannerUtilityLinks> 
 
\t \t \t \t \t <xe:loginTreeNode styleClass="logout"></xe:loginTreeNode> 
 
\t \t \t \t \t <xe:basicLeafNode label="#{javascript:@UserName();}" styleClass="username"></xe:basicLeafNode> 
 
\t \t \t \t </xe:this.bannerUtilityLinks> 
 
\t \t \t \t <xe:this.placeBarActions> 
 
\t \t \t \t \t <xe:basicLeafNode label="Link 1"></xe:basicLeafNode> 
 
\t \t \t \t \t <xe:basicLeafNode label="Link 2"></xe:basicLeafNode> 
 
\t \t \t \t </xe:this.placeBarActions> 
 
\t \t \t </xe:bootstrapResponsiveConfiguration> 
 
\t \t </xe:this.configuration> 
 
\t </xe:applicationLayout> \t 
 
</xp:view>

Ich habe die CSS in der Stylesheet hinzugefügt und enthalten es in Thema .:

 

    .my-responsive-modal { 
     display: block; 
     width: auto; 
     left: 0; 
     top: 0; 
     z-index: 1050 !important; 
    } 

Answer 1

Die .xsp-responsive-modal Klasse in xsp-mixin.css verwendet !important auf dem left und pr Operationen, die verhindern, dass das Modal ziehbar ist.

Ich arbeitete um diese durch Ersetzen der .xsp-responsive-modal Klasse mit meiner eigenen Klasse, .my-responsive-modal, die !important nicht verwendet.

Um die Klasse ersetzen ich das onShow Ereignis des Dialogs verwenden:

<xe:this.onShow> 
    <![CDATA[ 
     x$("#{id:dialog1}").removeClass("xsp-responsive-modal").addClass("my-responsive-modal"); 
    ]]> 
</xe:this.onShow> 

Hier ist die .my-responsive-modal Klasse:

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

Hinweis: Die x$() Funktion eine praktische Anwendung von Mark Roden ist Escape ':' in IDs, so dass sie mit JQuery arbeiten (https://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages)