Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Manual refresh needed to fix lay-out

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.

Tagged:

Comments

  • Did you try to do it using CSS?

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

    Or...

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

  • 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?

  • @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.

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

  • reevezreevez New
    edited November 2012
  • edited November 2012

    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.

  • reevezreevez New
    edited November 2012

    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.

  • 50sQuiff50sQuiff ✭✭
    edited November 2012

    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.

  • 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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • `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();
    });`

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

  • 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!

  • 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.

  • 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.

    grep is your friend.

Sign In or Register to comment.