I've got an application in which a SmartClient ListGrid and a Twitter Bootstrap multiselect co-exist. Unfortunately, when the multiselect drops down and attempts to overlap the ListGrid, it gets cut off. The issue appears to be ListGrid's refusal to allow div tags to overflow over it.
I dug through the documentation and played with various settings, but could not figure out how to change this behavior. Any ideas?
The code snippet below demonstrates the problem with a generic div tag. I need the sample div tag to be on top of the ListGrid.
<html>
<head>
<style>
.my-style {
overflow: visible;
border: 1px solid black;
}
</style>
<!--Deleted: jQuery & Isomorphic includes -->
<script>
$(document).ready( function() {
isc.ListGrid.create({
top:0, left:100,
fields: [ {name:'X'}, {name:'Y'} ],
items: []
});
$('#main').html('<div class="my-style">This is a test</div>');
});
</script>
</head>
<body>
<div id="main" class="my-style">
A sample div tag
</div>
</body>
</html>
SmartClient sets very high zIndex values on the DOM elements that it generates for widgets. The DOM Integration & Third-party Components page explains a few options for fixing the zIndex issue with third-party widgets:
Many widget libraries provide a mechanism to render the widget inside an existing HTML element. I don't know if the Bootstrap multiselect widget can do this, but if so, there is example code given on that documentation page on how to render the third-party widget within a custom SmartClient Canvas.
Whenever the multiselect widget is shown, you can call getZIndex(true) on the ListGrid and dynamically set the multiselect element's zIndex to a higher number.
This approach assumes that the ListGrid is a top-level widget (getParentCanvas() returns null). If the ListGrid is within some other SmartClient widget, then you will need to get the zIndex of the top-level widget.
As an unsupported option, you can modify the _nextZIndex, _SMALL_Z_INDEX, and _BIG_Z_INDEX class properties to make SmartClient use lower zIndex values.
I haven't tried this, but looking through the source code, the bringToFront() Canvas method sets the widget's zIndex to the _BIG_Z_INDEX, which it also increases.
There are two other options:
It looks like the Bootstrap multiselect widget is very similar to a SmartClient multi-select SelectItem with multipleAppearance:"picklist". See the Multi-Select example. You can certainly style the SelectItem pickList to look exactly like the Bootstrap multiselect widget if you wanted.
SmartClient supports embedding SmartClient widgets within existing HTML elements via the htmlElement attribute.