Combining Extension Library controls (Names\Value Picker) with Bootstrap - UI issue

Question

I'm using Bootstrap withing my XPages project and I'm trying to add some Names Picker and Value Picker from Extension Library.

The issue I have is with CSS since OneUI is not being loaded within my Theme; this makes modal dialog to be displayed with no real format.

Has anyone been able to fix this?

For Dialog controls; I'm using Mark Leusink workaround: http://www.bootstrap4xpages.com/bs4xp/demos.nsf/dialog.xsp

Answer 1

I had the same problem, so I found out the classes used for the dialog and added it to my CSS file.

This is working for me:

.dijitDialog {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
    padding:5px;
}

.dijitDialogTitleBar {
    padding: 9px 15px;
    border-bottom: 1px solid rgb(238, 238, 238);
    cursor: move;
}

.dijitDialogTitle {
    font-size: 24px;
    font-weight: bold;
    margin: 0px;
}

.dijitDialogCloseIcon .closeText {
    float: right;
    font-size: 20px;
    font-weight: bold;
    color: rgb(0, 0, 0);
    text-shadow: 0px 1px 0px rgb(255, 255, 255);
    opacity: 0.2;
    display: inline;
    position: relative;
    margin-top: 2px;
}

.dijitDialogUnderlayWrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 998;
    display: none;
    background: none repeat scroll 0% 0% black !important;
    opacity:0.5;
    filter:alpha(opacity=50);
}

Answer 2

Just add from above's CSS style to make the X icon cursor pointer instead of move

.dijitDialogCloseIcon
{
    cursor:pointer
}