CODEWITHSUNDEEP
jquerycssajax
Fabian
Fabian

Reputation: 1836

html text overwrites itself

After pasting some plain text as html via ajax (jQuery) into a div, the text overwrites itself.

example

I don't know if it's helpful to post all my code, but maybe someone had faced the same problem before and can give me a hint.

I'm using Symfony2 and jQuery (ajax request to action).

here is the ajax request and callback:

$('.tile').click(function(e){
    e.preventDefault();

    var thisTileImg = e.target
    var x = thisTileImg.x;
    var y = thisTileImg.y;
    var tileID = thisTileImg.id;

    // execute ajax-request to turnAction and give parameters for x and y of the tile
    var request = $.ajax({
      url: pathTurnAction,
      type: "POST",
      data: {'x':x, 'y':y, 'tileID':tileID},
      dataType: "html"
    });

    request.done(function(msg) {
        var obj = jQuery.parseJSON(msg);
        switch(obj.result){
            case -1:
      showPopup(obj.text, obj.button);
                break;
            case 0:
                thisTileImg.src = pathTileImg0;
                break;
            case 1:
                thisTileImg.src = pathTileImg1;
                break;
        }
        $('#attempts_left').html(obj.attempts);
    });

    request.fail(function(jqXHR, textStatus) {
        // TODO: do something with the error
        // ...
        alert( "Request failed: " + textStatus );
    });

});

function showPopup(text, button){
    $('#overlay_popup_text').html(text);
    $('#overlay_popup_button').html(button);
    $('#overlay_bg').show();
    $('#overlay_popup').show().center();
}

and the html/css

<div id="overlay_bg"></div>
<div id="overlay_popup">
  <div id="overlay_popup_text"></div>
  <div id="overlay_popup_button"></div>
</div>

#overlay_bg {
width: 100%;
height: 1900px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
display: none;
background: rgba(0, 0, 0, 0.75);
-moz-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
z-index: 10000;
}

#overlay_popup {
width: 200px;
height: 200px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
display: none;
padding: 15px;
background-color: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
z-index: 10001;
}

#overlay_popup_text {
  height: 80px;
}
#overlay_popup_buttons {
  height: 80px;
}

Upvotes: 4

Views: 2597

Answers (1)

JustinP
JustinP

Reputation: 1401

The solution was a CSS related. Line-height was 0. Text just kept writing on top of itself.

Upvotes: 6

Related Questions