Manual refresh needed to fix lay-out

reevez

Hello,

Thanks for the great software! I really like it. Right now I am fine-tuning my forum.

Currently I have the follow problem:

After I post a comment, I need to hit the F5 Refresh button in order to get my lay-out fixed, because after submitting a comment, the comment and the text area gets out of all existing boxes

See

I installed the auto resize and it works fine, but I still need to hit F5 to get it working and fix the lay-out.

How can I fix this?

Thanks in advance.

newhorizonte

Did you try to do it using CSS?

Something like:
.message img {
max-width: 500px;
}

Or...

.message {
width: 500px;
overflow-x: hidden;
}

reevez

Hello newhorizonte.

I did not try before I saw your post.
I wouldn't even know how to fix this with css.

I did try you suggestions now and both of them weren't working.
Thanks though.

Any other suggestions?

newhorizonte

@reevez said:
Hello newhorizonte.

I did not try before I saw your post.
I wouldn't even know how to fix this with css.

I did try you suggestions now and both of them weren't working.
Thanks though.

Any other suggestions?

Can you send me your forum URL? So I'll take a look.

newhorizonte

If you're doing it on localhost, tell me what's the theme.

reevez

The theme is Individual, http://vanillaforums.org/addon/individual-theme

newhorizonte

Oh... I forgot that's case-sensitive. So, try to use .Message instead of .message

Add this to your css:
<style type="text/css">
.Message img {
max-width: 500px;
}
</style>

Before the </head> of your template. If you don't wanna do that, you can add this at the end of your css style as well:
.Message img {
max-width: 500px;
}

p.s: change 500px with the max width that you want.
I tried here, using Firebug, and the fix worked well.

reevez

Newhorizonte, thanks I added the line to the template, and now I see the effect. I don't need the auto resize anymore.
But actually I was not talking solely about that problem. Thanks for solving that.

The following problem still exists:

The comment moves down outside the box.

50sQuiff

Perhaps you'll find my image-sizing solution helpful. I set a max-width for all images in my theme CSS. Then in the image resizing code (at the bottom of global.js), I detect all images that are max-width in size and link them to the source image.

This helps you contol image sizing throughout the app (preventing breakages like this) whilst giving users a simple way to view a source image. Just click the image and it opens in a new tab.

peregrine

Perhaps you'll find my image-sizing solution helpful. I set a max-width for all images in my theme CSS. Then in the image resizing code (at the bottom of global.js), I detect all images that are max-width in size and link them to the source image.

if you want, why don't you post your change to global.js, might be easier for people to cut and paste.

50sQuiff

`function LinkifyImages() {
jQuery('div.Message img').each(function(i,img) {
var imgc = jQuery(img);
if (imgc.width() >= 640) {
imgc.css('cursor', 'pointer');
imgc.click(function() {
window.open(img.src), '_blank';
})
}
});
}

jQuery(window).load(function() {
LinkifyImages();
});

$('div.Message img').livequery(function()
{
LinkifyImages();
});`

newhorizonte

Dude, it's hard to do what you asked us for. lol

reevez

Haha. For real?
Perhaps it comes with this theme.
As newhorizonte proposed, I'll try to contact the developer of the theme.
Perhaps it is a known issue.

Thanks everybody!

reevez

I found a fix!
I added the line
height: 500px;

to
.MessageForm {
}

into my custom.css
and now I do not see the comment area outside the boxes anymore.

x00

Most likely the reason why the javascript image resize didn't work is becuase they didn't use livequery, which mean the code was only executed once, which isn't good for ajax.

however the css solution is is better better as it is a universal rule, you are not resizing the images on an event. You can never force a browser that doesn’t want to behave to do what you want, but you can point them in the right direction.