I'm trying use jquery ui to scale a div, 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:

 $(ui.helper).effect("scale", { percent: 50 }, 200);

3 answers

0
points
This was chosen as the best answer

Nevermind, it turns out it was a conflicting line-height from another stylesheet I was using.

Always remember to check your line heights. >.>

Answered about 10 years ago by Stephen Belanger
0
points

I'm not that familiar with jquery, but are you using a browser which has a minimum font-size setting? They can sometimes clash with javascript manipulation of content.

Answered about 10 years ago by Richard Grevers
  • I tried it in IE, Firefox and Chrome--all had the same issue. Also; it wasn't initially the smallest font size, so it should have at least got a bit smaller. Stephen Belanger about 10 years ago
danwellman 5600
0
points

try adding overflow:auto to the container, this will ensure the text stays in the div and will just add a scroll bar when the text is too big to fit in the container properly

Answered about 10 years ago by danwellman
  • I don't want scrollbars though, what I want is a box that properly encloses it's elements. It shouldn't even BE restricted by size, since I didn't define any height. jQuery is just doing something odd that's messing up the text and I'm not sure how to get around that. Stephen Belanger about 10 years ago