PDA

View Full Version : hiding tools



vamshigurudu
30 Dec 2010, 2:37 AM
HI,

How to hide tools in a panel, onmouseover only it should be displayed.
Any help for this.

Thanks

Condor
30 Dec 2010, 2:40 AM
Wouldn't that be really confusing for a user?

But if you want, you can easily do that with some css.

vamshigurudu
3 Jan 2011, 2:11 AM
can give me the code for this, i have tried but no use.

Condor
3 Jan 2011, 2:57 AM
Try:

.x-tool {
visibility: hidden;
}
.x-tool-toggle-over,
.x-tool-close-over,
.x-tool-minimize-over,
.x-tool-maximize-over,
.x-tool-restore-over,
.x-tool-gear-over,
.x-tool-prev-over,
.x-tool-next-over,
.x-tool-pin-over,
.x-tool-unpin-over,
.x-tool-right-over,
.x-tool-left-over,
.x-tool-down-over,
.x-tool-up-over,
.x-tool-refresh-over,
.x-tool-plus-over,
.x-tool-minus-over,
.x-tool-search-over,
.x-tool-save-over,
.x-tool-help-over,
.x-tool-print-over,
.x-tool-expand-over,
.x-tool-collapse-over,
.x-tool-resize-over,
.x-tool-move-over {
visibility: visible;
}

vamshigurudu
3 Jan 2011, 3:08 AM
Try:

.x-tool {
visibility: hidden;
}
.x-tool-toggle-over,
.x-tool-close-over,
.x-tool-minimize-over,
.x-tool-maximize-over,
.x-tool-restore-over,
.x-tool-gear-over,
.x-tool-prev-over,
.x-tool-next-over,
.x-tool-pin-over,
.x-tool-unpin-over,
.x-tool-right-over,
.x-tool-left-over,
.x-tool-down-over,
.x-tool-up-over,
.x-tool-refresh-over,
.x-tool-plus-over,
.x-tool-minus-over,
.x-tool-search-over,
.x-tool-save-over,
.x-tool-help-over,
.x-tool-print-over,
.x-tool-expand-over,
.x-tool-collapse-over,
.x-tool-resize-over,
.x-tool-move-over {
visibility: visible;
}


Thanks for the reply, this code is working but on mouseover the tools are still hidden.

Condor
3 Jan 2011, 5:45 AM
A visibility:hidden element probably doesn't get a mouseover event.

Instead, you could change the default image:

.x-tool-toggle,
.x-tool-close,
.x-tool-minimize,
.x-tool-maximize,
.x-tool-restore,
.x-tool-gear,
.x-tool-prev,
.x-tool-next,
.x-tool-pin,
.x-tool-unpin,
.x-tool-right,
.x-tool-left,
.x-tool-down,
.x-tool-up,
.x-tool-refresh,
.x-tool-plus,
.x-tool-minus,
.x-tool-search,
.x-tool-save,
.x-tool-help,
.x-tool-print,
.x-tool-expand,
.x-tool-collapse,
.x-tool-resize,
.x-tool-move {
background-position: -1000px -1000px;
}

steffenk
3 Jan 2011, 6:03 AM
the best would be to render a container div around tools and use css on that one (x-tools-wrap). I really wonder that there is no one, every other element use (several) wrapper-divs

Condor
3 Jan 2011, 6:23 AM
In Ext 4 the header is a component with hbox layout and the tools are normal buttons, so just wait and you get your wish.

vamshigurudu
4 Jan 2011, 10:28 PM
Still i dint get the solution, i am able to hide the tools but unable to show when mouseover on the panel.