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

IE11 and Edge responsive layout table problem

Postby ruthhoward on Thu Apr 06, 2017 5:10 am

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.
ruthhoward
Sr. Propeller Head
 
Posts: 113
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Postby Rene Severens on Thu Apr 06, 2017 5:41 am

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."
Rene Severens
Sr. Propeller Head
 
Posts: 191
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer

Re: IE11 and Edge responsive layout table problem

Postby ruthhoward on Thu Apr 06, 2017 5:44 am

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.
ruthhoward
Sr. Propeller Head
 
Posts: 113
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Postby Dave Lee on Thu Apr 06, 2017 6:16 am

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?
Dave Lee
Senior Propellus Maximus
 
Posts: 4872
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: IE11 and Edge responsive layout table problem

Postby ruthhoward on Thu Apr 06, 2017 6:17 am

Dave: yes, combination of custom CSS and masterpage layouts with some skins. The custom CSS has no table styling in it at all though.
ruthhoward
Sr. Propeller Head
 
Posts: 113
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Postby Dave Lee on Thu Apr 06, 2017 6:31 am

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.
Dave Lee
Senior Propellus Maximus
 
Posts: 4872
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: IE11 and Edge responsive layout table problem

Postby ruthhoward on Thu Apr 06, 2017 6:33 am

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.
ruthhoward
Sr. Propeller Head
 
Posts: 113
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Postby Rene Severens on Tue Apr 11, 2017 3:08 am

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."
Rene Severens
Sr. Propeller Head
 
Posts: 191
Joined: Mon Sep 19, 2011 2:06 am
Location: Netherlands - Zoetermeer

Re: IE11 and Edge responsive layout table problem

Postby ruthhoward on Tue Apr 18, 2017 12:32 am

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
ruthhoward
Sr. Propeller Head
 
Posts: 113
Joined: Tue Jul 24, 2012 12:38 am

Re: IE11 and Edge responsive layout table problem

Postby ianegby on Mon Jul 17, 2017 2:27 am

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.
ianegby
Jr. Propeller Head
 
Posts: 1
Joined: Fri May 12, 2017 4:21 am


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 4 guests