Joe Ersinghaus schrieb:
> Hello,
>
> Does anyone know how to control the style (width or height) in the sandbox
> floatingPane.jsp example?
>
> I've tried adding sized elements inside the s:floatingPane control, and this
> will increase width (adjusted to the internal control), but the pane
> scroll-bar overflows.
>
>
Hi
the floating pane is a dojo control,
it usually has its own template in the dojo file hierarchy.
If you need small alterations the best bet is, to check the underlying
dojo widget template and alter the used css styles to your needs.
If you need a major overhaul an exchange of the template is probably
mandatory.
I am not sure if the template attribute already is exposed by the Widget
I have this high on my todo list (a base dojo output class which exposes
those attributes) but I am bound by other stuff currently so no fix for
this unless someone else patches it in for at least another two weeks.
anyway here is the core dojo internal template which is used
you can pick the needed css classes there
(from the dojo/src/widget/templates dir)
<div id="${this.widgetId}" dojoAttachEvent="onMouseDown"
class="dojoFloatingPane">
<div dojoAttachPoint="titleBar" class="dojoFloatingPaneTitleBar"
style="display:none">
<img dojoAttachPoint="titleBarIcon"
class="dojoFloatingPaneTitleBarIcon">
<div dojoAttachPoint="closeAction"
dojoAttachEvent="onClick:closeWindow"
class="dojoFloatingPaneCloseIcon"></div>
<div dojoAttachPoint="restoreAction"
dojoAttachEvent="onClick:restoreWindow"
class="dojoFloatingPaneRestoreIcon"></div>
<div dojoAttachPoint="maximizeAction"
dojoAttachEvent="onClick:maximizeWindow"
class="dojoFloatingPaneMaximizeIcon"></div>
<div dojoAttachPoint="minimizeAction"
dojoAttachEvent="onClick:minimizeWindow"
class="dojoFloatingPaneMinimizeIcon"></div>
<div dojoAttachPoint="titleBarText"
class="dojoFloatingPaneTitleText">${this.title}</div>
</div>
<div id="${this.widgetId}_container" dojoAttachPoint="containerNode"
class="dojoFloatingPaneClient"></div>
<div dojoAttachPoint="resizeBar" class="dojoFloatingPaneResizebar"
style="display:none"></div>
</div>
the original css is following:
/********** Outer Window ***************/
.dojoFloatingPane {
/* essential css */
position: absolute;
overflow: visible; /* so drop shadow is displayed */
z-index: 10;
/* styling css */
border: 1px solid;
border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
background-color: ThreeDFace;
}
/********** Title Bar ****************/
.dojoFloatingPaneTitleBar {
vertical-align: top;
margin: 2px 2px 2px 2px;
z-index: 10;
background-color: #7596c6;
cursor: default;
overflow: hidden;
border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight;
vertical-align: middle;
}
.dojoFloatingPaneTitleText {
float: left;
padding: 2px 4px 2px 2px;
white-space: nowrap;
color: CaptionText;
font: small-caption;
}
.dojoTitleBarIcon {
float: left;
height: 22px;
width: 22px;
vertical-align: middle;
margin-right: 5px;
margin-left: 5px;
}
.dojoFloatingPaneActions{
float: right;
position: absolute;
right: 2px;
top: 2px;
vertical-align: middle;
}
.dojoFloatingPaneActionItem {
vertical-align: middle;
margin-right: 1px;
height: 22px;
width: 22px;
}
.dojoFloatingPaneTitleBarIcon {
/* essential css */
float: left;
/* styling css */
margin-left: 2px;
margin-right: 4px;
height: 22px;
}
/* minimize/maximize icons are specified by CSS only */
.dojoFloatingPaneMinimizeIcon,
.dojoFloatingPaneMaximizeIcon,
.dojoFloatingPaneRestoreIcon,
.dojoFloatingPaneCloseIcon {
vertical-align: middle;
height: 22px;
width: 22px;
float: right;
}
.dojoFloatingPaneMinimizeIcon {
background-image: url(images/floatingPaneMinimize.gif);
}
.dojoFloatingPaneMaximizeIcon {
background-image: url(images/floatingPaneMaximize.gif);
}
.dojoFloatingPaneRestoreIcon {
background-image: url(images/floatingPaneRestore.gif);
}
.dojoFloatingPaneCloseIcon {
background-image: url(images/floatingPaneClose.gif);
}
/* bar at bottom of window that holds resize handle */
.dojoFloatingPaneResizebar {
z-index: 10;
height: 13px;
background-color: ThreeDFace;
}
/************* Client Area ***************/
.dojoFloatingPaneClient {
position: relative;
z-index: 10;
border: 1px solid;
border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow;
margin: 2px;
background-color: ThreeDFace;
padding: 8px;
font-family: Verdana, Helvetica, Garamond, sans-serif;
font-size: 12px;
overflow: auto;
}
