I'm trying use jquery ui to scale a div that I'm dragging around to make it easier to see what's behind it, but any
text inside it is scaling strangely. The
text itself becomes smaller, but it seems to have a bunch of padding around it and is floating now. The
text extends past the bottom of the div even though it should be contained properly by the div. I put a red border around the lines of
text and the borders are the same
size as the original
text. I'm not really sure what to do to get this to work...
HTML:
<div class="item draggable" id="item-1'">
<div class="image-block">
<a class="delete-button" title="delete me!" href="/remove/1" onclick="return $(this).confirm(\'Really remove this image?\');">X</a>
<a class="image" href="/edit/1"><img src="/someimage.jpg" /></a>
<div class="clear-block"></div>
</div>
<h3>Some title</h3>
</div>
CSS:
div.image-list div.item {
float:left;
background:#fff;
width:150px;
padding:5px;
margin:4px;
border:1px solid #d3d5d6;
}
div.image-list div.item h3 {
margin:0;
padding:0;
border:solid 1px #F00;
}
div.image-list div.item div.image-block a.delete-button {
float:right;
position:relative;
background:#fff;
display:none;
top:0.8em;
margin-bottom:-20.0em;
width:3em;
height:1.8em;
padding:0.2em 1em;
}
div.image-list div.item div.image-block a.image {
float:left;
display:block;
}
.clear-block {
clear:both;
}
jquery:
$(".draggable").draggable({
helper: 'clone',
start: function(ev, ui) {
$(ui.helper).effect( "scale", { percent: 50 }, 200 );
}
});
