Upda...">
Geek asks and answers

Chrome - Colspan not working as expected

I have this code:

<tr>
    <td width="40%" align="left" class="form_cell">
    <span class="sub_header">Update or Delete</span><br />
    Please select whether you would like us to update this contacts details, or delete them from the system.
    </td>

    <td width="60%" align="left" class="form_cell">
    [class=form__parser func=updateDetails__updel(150.$update_or_delete$.true)]
    </td>
</tr>
<tr>
    <td width="100%" align="left" colspan="2" id="ammend_contact_details" style="display: none;">
        <table border="0" cellspacing="0" cellpadding="0" width="100%" align="left">
            <tr>
                <td width="40%" align="left" class="form_cell">
                <span class="sub_header">New Title</span><br />
                            Please enter the contacts new title, IE Mr, Mrs, Dr, Miss, Ms
                </td>

                <td width="60%" align="left" class="form_cell">
                <input type="text" name="update_contact_title" class="input" size="48" maxlength="6" value="$update_contact_title$" />
                </td>
            </tr>
        </table>
    </td>
</tr>

Code starting with [class=form__parser...]creates a drop-down list. If you click on one of the options, the cell below it ( ID ammend_contact_details) will be displayed , otherwise it is hidden.

Web site address for this page: http://www.westlandstc.com/index.php?plid=6#eyJwbGlkIjoiNTkiLCJjbGlkIjoiNDQ2Iiwic2NsaWQiOiJudWxsIiwiZHluYW0iOiJudWxsIiwiYXBwSWQiOiJudWxsIn0= , and this element is at the bottom of the page.

The problem is that the attribute colspanworks fine in Internet Explorer (unexpected surprise), however, in Chrome, all content that is supposed to be distributed to 2 parent columns falls into only the 1st column.

, style="display: none", . , , Chrome .

, , 2 . Internet Explorer , . .

, ?

+5
3

display, ? iirc "display: table-cell" ( - ),

+9

style.display = ''

.

': -'

+3

Instead of adding a CSS property display:inlineto <td>, which for some reason is satisfied by IE, and Chrome is not, I would update your JavaScript to just remove the style display:noneand let the default browser display:table-cellaffect.

In the <select name="update_or_delete">onchange method , simply:

if(this.value=='Update') { 
  document.getElementById('ammend_contact_details').style.display='';
} else { 
  document.getElementById('ammend_contact_details').style.display='none';
}
+2
source

More articles:


All Articles