[SOLVED]9-grid - background image not adjusting on appending
The new version of 9-grid come with a remove9Grid() function. If after I've appended my content I remove9Grid() and scale9Grid() again then the background-image adjusts.
There is still a problem that this produces a flickering effect as 9Grid removes the image on remove9Grid()... if I find how to sort this out I'll post it here. On the meanwhile I've raised an issue with the 9Grid guys.
BTW, if you're not using this plug-in, TRY IT! it's the best solution I've found until now for solving the rounded corners issue. Probably for other stuff also...
Hi everyone,
I'm new to the forum and fairly new to JQuery.
Could you please see if you can help me with the following:
I'm using the JQuery plug-in 9-Grid for scaling my main container CSS background image. The problem is that when I append text to a DIV, it overflows out of the background image bounds. This is only a problem in Firefox, IE works fine.
I've tried to adjust the height of the DIV after appending the content but that doesn't make the background image adjust. Tried using text() and html() functions instead of append() but that doesn't work either.
I'm really out of ideas and can't find anything on the web.
One option would be making the background an html image instead of a CSS background, but that would cause all sorts of problems with positioning on my advanced stage app.
The relevant snippets of a test case:
CSS:
-
#container{
background-image:url(images/content.png);
width:100%;
padding:3em 0 2em 3em;
}
9-Grid code:
-
$('#container').scale9Grid({top:38,bottom:38,left:38,right:38});
JQuery to append content:
-
$('#test').click(function(){
$('#testContainer').append('Any Text here.<br/>Any Text here<br/>Any Text');
});
HTML:
-
<div id="container">
<div id="testContainer"></div>
</div>
Many Thanks,
Gonçalo