Paging using div's instead of tables - Essential Objects, Inc. Support Forum

Welcome Guest

Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Paging using div's instead of tables

Paging using div's instead of tables

Options

Previous Topic · Next Topic

Phil

Posted: Tuesday, February 6, 2018 4:31:59 AM

Rank: Advanced Member
Groups: Member

Joined: 11/8/2017
Posts: 66

Hello - I'm wanting to use div's instead of tables as our page appears across device types. I am submitting the HTML below to EO-PDF (latest version) however I do not see the header repeating

Can you please help ?

<style type="text/css">
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
</style>

<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">col1</div>
<div class="divTableHead">col2</div>
<div class="divTableHead">col3</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
<div class="divTableCell">
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
<div>9999</div>
</div>
</div>
</div>
</div>

eo_support

Posted: Tuesday, February 6, 2018 7:13:09 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,221

Hi,

No. The table header footer repeating feature only applies to table element because the logic relies on not only table-header-group display attribute, but the logical structure of the table itself. See our reply for your other post for more details.

Thanks!

Phil

Posted: Tuesday, February 6, 2018 9:27:44 AM

Rank: Advanced Member
Groups: Member

Joined: 11/8/2017
Posts: 66

As you'll know, writing dynamic pages across device types generally involves removing all tables - the div structure in the original query (at least within a webpage) simulates (and looks exactly like) a table structure - is it possible that you would have a look at supporting the use of div's instead of tables - tables are simply not equipped to resolve within UI's on all devices

eo_support

Posted: Tuesday, February 6, 2018 1:27:18 PM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,221

Thank you very much for the valuable feedback. We sure should look into this to see if we can simplify/generalize this. If we do enhance/implement anything on this, we will reply in this thread again.

Phil

Posted: Monday, March 12, 2018 4:26:13 AM

Rank: Advanced Member
Groups: Member

Joined: 11/8/2017
Posts: 66

Hello, I wondered whether this requirement had been reviewed/considered-further - it has become a blocker for us. If there is no support for div style headers, do you know of a 'generic' work-around involving for example css (with @media directive) or some common functionality (within the EO-PDF API) we can share across reports. The prospect of maintaining two different templates (one for our UI and one for generating PDF using EO-PDF) is not really an option as we have numerous reports

eo_support

Posted: Monday, March 12, 2018 9:29:06 AM

Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,221

Hi,

We did look into this and has decided against it temporarily because we were not able to find a straight forward and intuitive way to associate header, body and footer as they would have with a normal table element since DIVs in the page do not necessarily render in the same order they appear in the HTML file (such as absolute positioned DIVs). Without being able to associate different section of the "table" together, we can't reliability repeat header or footer.

We do support @media directive. You can switch EO.Pdf to use print media with this property:

https://www.essentialobjects.com/doc/eo.pdf.htmltopdfoptions.useprintmedia.aspx

Another way you may want to try is to use an outer table for repeating header/footer purpose and then put all your DIV into a table cell. It will be something like this:

Code: HTML/ASPX

Copy

<table>
   <thead>
       <td>header</td>
    </thead>
    <tbody>
       <tr><td><div style='height:1px;'></div></td></tr>
       <tr><td>main contents here</td></tr>
    </tbody>
    <tfoot>
        <td>footer</td>
    </tfoot>
</table>

Note that there are two table rows in this table and your contents would be in the second row. This is because our converter automatically prevents the table header from breaking from the first row to avoid empty table headers. So in order for your contents to be paged correctly, it can not be in the first row. As such the code above inserts a small dummy first row.

Hope this helps. Please feel free to let us know if you still have any questions.

Thanks!

You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Message