CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
colmtuite
colmtuite

Reputation: 4491

Is it possible to style jQuery UI Resizable Ghost?

I have jQuery UI draggable working and with ghost set to true, a transparent ghost appears when I resize the element.

$('.container').resizable({
    ghost: true
});

I want to remove the background-color, set the opacity and style the border on the ghost.

.ui-resizable-ghost {
    z-index: 9999;
    border: 1px dashed blue !important;
    background-color: none !important;
}

Only the z-index and border properties seem to be taking effect though, even when I use !important.

Upvotes: 0

Views: 2136

Answers (1)

j08691
j08691

Reputation: 207919

Seems very doable and without needing to modify the source code. Target the .ui-resizable-helper selector:

jsFiddle example

.ui-resizable-helper {
    border: 4px dashed #faa;
    background-color: #eeeecc;
    opacity: .5;
}

To make the helper/ghost's background transparent, add:

.ui-resizable-ghost {
     opacity:0 !important;
}

Upvotes: 3

Related Questions