Walter,
Using your HTML as an example, is it possbile to make the diagram and/or palette canvas resize in response to its parent dimensions changing?
eg. If I change your HTML sample to be resizable …
$("#paletteDraggable").draggable({ handle: '#paletteDraggableHandle' }).resizable();
You will notice that (at least in my browsers) that the canvas does not respond to any change of size.
I've tried to use the update method - but it has no effect (or I'm doing something wrong).
Gary.
Gary,
There are a few reasons for resizable not working.
We did not include the jquery UI CSS file, which is needed for the handles to work.
Also, the way that
myPalette.addDiagramListener(‘InitialLayoutCompleted’, function(diagramEvent) {
…was written also precludes it from working, as this gives an explicit size to the palette div.
Also, some other CSS issues make it difficult, as the sample was not set up with resizing in mind.
I have made the necessary modifications for this sample to work with resizing, but it won’t be on our website until the next build, which will probably be later this week.
In the meantime, below are the code modifications that were needed to get it working. Let me know if you have any questions.
... myPalette.addDiagramListener(‘InitialLayoutCompleted’, function(diagramEvent) {
var pdrag = document.getElementById(‘paletteDraggable’);
var palette = diagramEvent.diagram;
var paddingHorizontal = palette.padding.left + palette.padding.right;
var paddingVertical = palette.padding.top + palette.padding.bottom;
pdrag.style.width = palette.documentBounds.width + 20 + ‘px’;
pdrag.style.height = palette.documentBounds.height + 30 + ‘px’;
});
…
$(function() {
$("#paletteDraggable").draggable({handle: ‘#paletteDraggableHandle’}).resizable({
// When resizing is done we need to call update() to ensure the Diagram is resized
stop: function(){ myPalette.update(); }
});
$("#infoDraggable").draggable({handle: ‘#infoDraggableHandle’});
});
…
#myPalette {
background-color: whitesmoke;
width: 100%;
height: 100%;
}
/
One simple way of making a div fill its space,
with allowances for the title (top) and the resize handle (bottom)
/
#paletteContainer {
position:absolute;
bottom: 14px;
left: 0px;
right: 0px;
top: 14px;
}
…