IE11 and Edge responsive layout table problem

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
ruthhoward
Sr. Propeller Head
Posts: 121
Joined: Tue Jul 24, 2012 12:38 am

IE11 and Edge responsive layout table problem

Post by ruthhoward »

We've implemented a custom responsive layout and sometimes when we resize IE11 or Edge the table display breaks, when a cell wraps text so that it goes onto an extra line, the previous cell in the same row doesn't resize properly with it. This is on FILE access with MOTW and everything configured properly.

For example for this table.

Code: Select all

        <table class="TableStyle-accl_shaded_header_table" style="width: 100%;mc-table-style: url('../../Resources/Stylesheets/TableStyles/accl_shaded_header_table.css');" cellspacing="0">
            <thead>
                <tr class="TableStyle-accl_shaded_header_table-Head-Header1">
                    <th class="TableStyle-accl_shaded_header_table-HeadE-Column1-Header1">Property name</th>
                    <th class="TableStyle-accl_shaded_header_table-HeadE-Column1-Header1">Multiple</th>
                    <th class="TableStyle-accl_shaded_header_table-HeadD-Column1-Header1">Description</th>
                </tr>
            </thead>
            <tr class="TableStyle-accl_shaded_header_table-Body-Body1">
                <td class="TableStyle-accl_shaded_header_table-BodyE-Column1-Body1"><code class="code">job-uid</code>
                </td>
                <td class="TableStyle-accl_shaded_header_table-BodyE-Column1-Body1">No</td>
                <td class="TableStyle-accl_shaded_header_table-BodyD-Column1-Body1">The user name of the job submitter. For password-protected gateways, this will be the login name used to connect to the gateway.
Otherwise, it will be the current operating system user name on the client machine.</td>
            </tr>
            <tr class="TableStyle-accl_shaded_header_table-Body-Body1">
                <td class="TableStyle-accl_shaded_header_table-BodyE-Column1-Body1"><code class="code">job-authenticated-uid</code>
                </td>
                <td class="TableStyle-accl_shaded_header_table-BodyE-Column1-Body1">No</td>
                <td class="TableStyle-accl_shaded_header_table-BodyD-Column1-Body1">The authenticated gateway user name of the job submitter. For password-protected gateways, this will be the same as
<code class="code">job-uid</code>, otherwise this property will not be present.</td>
            </tr>
This can display like this:
tableproblem.PNG
We've just moved to responsive from the old tripane HTML5 layout and the same topic compiled from that target (still in IE11/Edge) didn't show the same strange table layout problem.

I've googled and don't see anything obvious as a general IE11/Edge issue.

I don't know what might be wrong with the table CSS that could cause this and none of my project standard CSS files have any relevant table controls that could be affecting it.

*Edit* I am pretty sure its not out table CSS, I removed that and added local formatting to ensure that the cell borders are displayed and there's something very funky
tableproblem2.PNG
You do not have the required permissions to view the files attached to this post.
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: IE11 and Edge responsive layout table problem

Post by Rene Severens »

Hi,

Not sure how your table was created but when using a tablestyle.css I usually get this:

<table style="width: 100%;mc-table-style: url('../../Resources/TableStyles/WebHelp_TableStyle.css');border-left-style: solid;border-left-width: 1px;border-left-color: #595959;border-right-style: solid;border-right-width: 1px;border-right-color: #595959;border-top-style: solid;border-top-width: 1px;border-top-color: #595959;border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color: #595959;margin-left: 0;margin-right: auto;" class="TableStyle-WebHelp_TableStyle" cellspacing="0">
<col class="TableStyle-WebHelp_TableStyle-Column-Column1" />
<col class="TableStyle-WebHelp_TableStyle-Column-Column1" />
<col class="TableStyle-WebHelp_TableStyle-Column-Column1" />
<thead>
<tr class="TableStyle-WebHelp_TableStyle-Head-Header1">
<th class="TableStyle-WebHelp_TableStyle-HeadE-Column1-Header1">dfgdfg</th>
<th class="TableStyle-WebHelp_TableStyle-HeadE-Column1-Header1">dfgdfg</th>
<th class="TableStyle-WebHelp_TableStyle-HeadD-Column1-Header1">dfgdfg</th>
</tr>
</thead>
<tbody>
<tr class="TableStyle-WebHelp_TableStyle-Body-Body1">
<td class="TableStyle-WebHelp_TableStyle-BodyE-Column1-Body1">df afds </td>
<td class="TableStyle-WebHelp_TableStyle-BodyE-Column1-Body1">as fas </td>
<td class="TableStyle-WebHelp_TableStyle-BodyD-Column1-Body1">a asd </td>
</tr>
<tr class="TableStyle-WebHelp_TableStyle-Body-Body1">
<td class="TableStyle-WebHelp_TableStyle-BodyE-Column1-Body1">asd asd </td>
<td class="TableStyle-WebHelp_TableStyle-BodyE-Column1-Body1">asd asd </td>
<td class="TableStyle-WebHelp_TableStyle-BodyD-Column1-Body1">asd asd </td>
</tr>
<tr class="TableStyle-WebHelp_TableStyle-Body-Body1">
<td class="TableStyle-WebHelp_TableStyle-BodyB-Column1-Body1">asd asd </td>
<td class="TableStyle-WebHelp_TableStyle-BodyB-Column1-Body1">as dasd asd </td>
<td class="TableStyle-WebHelp_TableStyle-BodyA-Column1-Body1">as dasd as </td>
</tr>
</tbody>
</table>

Note that for the table you are using, the structure is quite different. Maybe that is causing the issue?

Greetings,
René Severens
"The numbers are strange today; they somehow do not seem to add up."
ruthhoward
Sr. Propeller Head
Posts: 121
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Post by ruthhoward »

Thanks Rene.

I'm using Flare 2017 and that's what it produces. I removed all formatting a re-applied it and for some reason it gave me a table style definition like your this time. But even with that its still suffering the same issue.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: IE11 and Edge responsive layout table problem

Post by NorthEast »

ruthhoward wrote:We've implemented a custom responsive layout
What's your "custom responsive layout"?
If that's some extra CSS you've added, then does the table work if you don't include this custom layout CSS?
ruthhoward
Sr. Propeller Head
Posts: 121
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Post by ruthhoward »

Dave: yes, combination of custom CSS and masterpage layouts with some skins. The custom CSS has no table styling in it at all though.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: IE11 and Edge responsive layout table problem

Post by NorthEast »

ruthhoward wrote:Dave: yes, combination of custom CSS and masterpage layouts with some skins. The custom CSS has no table styling in it at all though.
All I'd suggest is pressing F12 in your browser and using the 'inspect' option to see the HTML/CSS.
ruthhoward
Sr. Propeller Head
Posts: 121
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Post by ruthhoward »

Dave: yup tried that and the table cell that's showing as being "short" that those either side is indeed that size according to the dev tools:
table_f12.PNG
I worried briefly that that valign="top" might be involved but removing that doesn't help either
You do not have the required permissions to view the files attached to this post.
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: IE11 and Edge responsive layout table problem

Post by Rene Severens »

Hi,

From this screenshot I see that in column "Multiple" there seems to be a merged cell for record 2 and record 3.
Is this correct?
Can you create this table without this merged cell, if so, and see if this helps?

Greetings,
René Severens
"The numbers are strange today; they somehow do not seem to add up."
ruthhoward
Sr. Propeller Head
Posts: 121
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Post by ruthhoward »

No, its not a merged cell that's the problem! Its displaying like a merged cell over several rows but it isn't its just a standard table, the HTML is in my original post:

Code: Select all

            <tr class="TableStyle-accl_shaded_header_table-Body-Body1">
                <td class="TableStyle-accl_shaded_header_table-BodyE-Column1-Body1"><code class="code">job-uid</code>
                </td>
                <td class="TableStyle-accl_shaded_header_table-BodyE-Column1-Body1">No</td>
                <td class="TableStyle-accl_shaded_header_table-BodyD-Column1-Body1">The user name of the job submitter. For password-protected gateways, this will be the login name used to connect to the gateway.
Otherwise, it will be the current operating system user name on the client machine.</td>
            </tr>
Rene Severens wrote:Hi,

From this screenshot I see that in column "Multiple" there seems to be a merged cell for record 2 and record 3.
Is this correct?
Can you create this table without this merged cell, if so, and see if this helps?

Greetings,
René Severens
ianegby
Jr. Propeller Head
Posts: 1
Joined: Fri May 12, 2017 4:21 am

Re: IE11 and Edge responsive layout table problem

Post by ianegby »

For what it's worth, this turns out to be a problem using tables inside flexbox. For a simple example, see https://codepen.io/lamanai/pen/yMmGBN.
Rene Severens
Sr. Propeller Head
Posts: 210
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer
Contact:

Re: IE11 and Edge responsive layout table problem

Post by Rene Severens »

Hi,

I have noticed that this table as well as the table used in the flexbox link, both have multiple columns that have no fixed width set.

If all but 1 column can have a fixed width, then resizing will only affect 1 column. I usually have the last or fore-last column set to auto and all others defined with a fixed width. This might reduce the noticed effect and even result in the effect not seen anymore.

Greetings,
Rene Severens
"The numbers are strange today; they somehow do not seem to add up."
Post Reply