TD height not adjusting to new breaks added to innerHTML

Discussion in 'Javascript' started by Fredyy, Jul 13, 2006.

  1. Fredyy

    Fredyy Guest

    i am simply updating the innerHTML of a TD with text (replacing '\n'
    with '<br />'). In firefox, if i add one line to the existing i.e.

    Changing:
    123 Your Street
    Town, State 12345

    To:
    123 Your Street
    Suite 123
    Town, State 12345

    The cell that is updated in the "grid" table will overlap the cell in
    the row below it (note: it works fine on the bottom cell). I can't
    figure out why this is happening. i can remedy it by displaying an
    alert(), but i am trying to avoid that at all costs.

    Here is an example script:

    http://www.ladyrocket.com/test/admin/events2.php

    Steps to replicate: Simply click edit link on the first "event" listed
    and then change the address in the textarea by either adding or
    removing a line of text and save it. You should see what i am talking
    about if you are using firefox (i have version 1.5.04).

    Note: if you click on the address cell of each event it will use the
    same function to update the content of that cell to:
    1
    2
    3
    4
    5
    This was done to verify that function was working right.

    Here are the two functions i am using:
    function cbUpdate() {
    if ( xmlCheckState(request) ) {
    var json = request.responseText;

    json = json.parseJSON();

    if ( json['status'] == 1 ) {

    updateElement("evt_address"+json["event_id"],json['event_address']);
    updateElement("evt_date"+json["event_id"],json['event_date']);
    updateElement("evt_name"+json["event_id"],"");
    updateElement("evt_name"+json["event_id"],json['event_name']);

    if ( json['event_website'].length == 0 ) {
    updateElement("evt_website"+json["event_id"],"n/a");
    } else {

    updateElement("evt_website"+json["event_id"],json['event_website']);
    }
    }
    }
    }

    function updateElement(name,text) {
    var obj = document.getElementById(name)
    var newtext = text.replace(/\n/g,"<br />");

    obj.innerHTML = newtext;
    }

    Any advise would be appreciated.

    Thanks, Fredyy
     
    Fredyy, Jul 13, 2006
    #1
    1. Advertising

  2. Fredyy

    Guest

    There's a reference to innerHTML in this file:
    http://eastontario.com/conventions/count2.htm

    Fredyy wrote:
    > i am simply updating the innerHTML of a TD with text (replacing '\n'
    > with '<br />'). In firefox, if i add one line to the existing i.e.
    >
    > Changing:
    > 123 Your Street
    > Town, State 12345
    >
    > To:
    > 123 Your Street
    > Suite 123
    > Town, State 12345
    >
    > The cell that is updated in the "grid" table will overlap the cell in
    > the row below it (note: it works fine on the bottom cell). I can't
    > figure out why this is happening. i can remedy it by displaying an
    > alert(), but i am trying to avoid that at all costs.
    >
    > Here is an example script:
    >
    > http://www.ladyrocket.com/test/admin/events2.php
    >
    > Steps to replicate: Simply click edit link on the first "event" listed
    > and then change the address in the textarea by either adding or
    > removing a line of text and save it. You should see what i am talking
    > about if you are using firefox (i have version 1.5.04).
    >
    > Note: if you click on the address cell of each event it will use the
    > same function to update the content of that cell to:
    > 1
    > 2
    > 3
    > 4
    > 5
    > This was done to verify that function was working right.
    >
    > Here are the two functions i am using:
    > function cbUpdate() {
    > if ( xmlCheckState(request) ) {
    > var json = request.responseText;
    >
    > json = json.parseJSON();
    >
    > if ( json['status'] == 1 ) {
    >
    > updateElement("evt_address"+json["event_id"],json['event_address']);
    > updateElement("evt_date"+json["event_id"],json['event_date']);
    > updateElement("evt_name"+json["event_id"],"");
    > updateElement("evt_name"+json["event_id"],json['event_name']);
    >
    > if ( json['event_website'].length == 0 ) {
    > updateElement("evt_website"+json["event_id"],"n/a");
    > } else {
    >
    > updateElement("evt_website"+json["event_id"],json['event_website']);
    > }
    > }
    > }
    > }
    >
    > function updateElement(name,text) {
    > var obj = document.getElementById(name)
    > var newtext = text.replace(/\n/g,"<br />");
    >
    > obj.innerHTML = newtext;
    > }
    >
    > Any advise would be appreciated.
    >
    > Thanks, Fredyy
     
    , Jul 13, 2006
    #2
    1. Advertising

  3. Fredyy

    Guest

    I ran into this problem frequently a while ago and solved it with this:

    /** Force the page to redraw the layout and fix problems caused by
    adding elements to the DOM */
    _forcePageLayout = function ()
    {
    if (browser.isGecko || browser.isOpera) {
    document.body.style.height = "1px";
    document.body.style.height = "auto";
    }
    else if (!browser.isKHTML) {
    document.body.style.display = "none";
    document.body.style.display = "block";
    }
    }

    you'll need to replace the browser conditionals with your own... but it
    works fine. i test it on your page in Firefox.
     
    , Jul 13, 2006
    #3
  4. Fredyy

    Fredyy Guest

    i tried that, it worked but muddied up the outer table. I changed the
    document.body.style.height to '100%' to maintain existing formatting
    and it performs exactly the same.

    any other ideas?



    wrote:
    > I ran into this problem frequently a while ago and solved it with this:
    >
    > /** Force the page to redraw the layout and fix problems caused by
    > adding elements to the DOM */
    > _forcePageLayout = function ()
    > {
    > if (browser.isGecko || browser.isOpera) {
    > document.body.style.height = "1px";
    > document.body.style.height = "auto";
    > }
    > else if (!browser.isKHTML) {
    > document.body.style.display = "none";
    > document.body.style.display = "block";
    > }
    > }
    >
    > you'll need to replace the browser conditionals with your own... but it
    > works fine. i test it on your page in Firefox.
     
    Fredyy, Jul 14, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Adam Smith

    Adjusting Input field size (height)

    Adam Smith, Sep 9, 2006, in forum: HTML
    Replies:
    3
    Views:
    12,919
    Jukka K. Korpela
    Sep 9, 2006
  2. Replies:
    2
    Views:
    1,625
    Ben C
    Apr 2, 2007
  3. Cal Who
    Replies:
    2
    Views:
    411
    Cal Who
    Jun 1, 2010
  4. Jesse Joseph Acosta

    Adjusting the width and height of a popup window

    Jesse Joseph Acosta, Nov 18, 2003, in forum: Javascript
    Replies:
    1
    Views:
    102
  5. newbie
    Replies:
    0
    Views:
    118
    newbie
    May 16, 2007
Loading...

Share This Page