CODEWITHSUNDEEP
cssjquery-ui
Derek
Derek

Reputation: 485

Requesting help in jQuery or CSS.

The background color, font color and border are being lost when I drop an element. How do I keep these properties intact? Here is the project in jsFiddle:

http://jsfiddle.net/n2learning/tV4n7/48/

Thanks!

Upvotes: 0

Views: 66

Answers (6)

Zoli
Zoli

Reputation: 250

Add to CSS

.droptrue
{
    font: 16px serif 
    background: none repeat scroll 0 0 lightgray;
    border: 2px solid #666666;
    color: navy;
    margin: 10px;
    padding: 5px;
}

Upvotes: 0

Kisaro
Kisaro

Reputation: 281

Change

    #routinefilter .droptrue

into

    .droptrue

Edit: Whoops, too late :)

Upvotes: 0

Msonic
Msonic

Reputation: 1456

This should do the trick.

#routinefilter .droptrue, #dropTargetframe .droptrue{
    background: lightgray;
    color: navy;
    margin:10px;
    padding:5px;
    border:2px solid #666;
}

The .droptrue elements will keep the same css style when inside the box as well!

Edit: You can also change it to only .droptrue if you want those boxes to use this style wherever they are.

Upvotes: 0

kitti
kitti

Reputation: 14794

Your CSS rule:

#routinefilter .droptrue{

only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:

.droptrue{

Upvotes: 1

Pat
Pat

Reputation: 25675

Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:

.droptrue{
    background: lightgray;
    color: navy;
    margin:10px;
    padding:5px;
    border:2px solid #666;
}

Here's the working example.

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:

#routinefilter .droptrue,
#dropTargetframe .droptrue {
    background: lightgray;
    color: navy;
    margin:10px;
    padding:5px;
    border:2px solid #666;
}

Updated JS Fiddle.

Or you could simply remove the ancestor id from the selector, to give simply:

.droptrue {
    background: lightgray;
    color: navy;
    margin:10px;
    padding:5px;
    border:2px solid #666;
}

Updated JS Fiddle demo.

Upvotes: 0

Related Questions