Hello,

I'm making a image website with a bunch of images on the website, and below every image there is possibility of commenting the image and after that comments gets displayed without page loading and the comment content, the problem is when I have long comments which break the current line they don't get displayed since my comment box css overflow is hidden. Here is example :

This is a comment - This is displayed properly This is a comment This is a comment This is a comment - this is not displayed properly since it break line. Here is the jQuery code for this :

$.ajax({
    type: "POST",
    url: "<?=base_url()?>imagesform/post_comment",
    data: datas,
    success: function () {
        $("#image-comments-" + image_id).attr("class", "comments");
        $("#image-comments-" + image_id).append("<li id=\"new_append_" + image_id+ "\">" + $("#image").find(".comment").val() + "</li>").children(':last').height($('.comments li:last').height()).hide().slideDown(500, function () {
            var bodyHeight = $('html').height();
            $('.addComment').fadeOut(300, function () {
                $('html').height(bodyHeight);
            });
        });
        alert($("#image").find(".comment").val());
    }

});

Here the $("#image").find(".comment").val() is the value of the text-area in which comment is inputted, when I alert it the whole multi line input is there put its not being appended to the li properly, that is part when I get confused, any suggestions why only part of the inputted string is appended?