Odyn
October 4, 2022, 9:38am
1
Hello @Sander @Marten @hamelj @Erik
I have one more question regarding dynamic table and Connect template
I have table which breaks over pages.
When table breaks to other pages the bottom border is missing.
Is there any way to fix it?
See example:
Sander
October 4, 2022, 10:22am
2
Hi @Odyn ,
If you have a border-bottom set on “table” it should be visible on every page, but I think in your template you only set a border on certain rows.
Maybe something like this:
table:not(:last-of-type) {
border-bottom: 1px solid black;
}
Odyn
October 4, 2022, 12:15pm
3
Looks much better, but how i can apply this selector only for particular table with specified class name?
Ok this way should be good:
.table--sliced:not(:last-of-type) {
border-bottom: 1px solid black;
}
Odyn
October 4, 2022, 2:02pm
4
Ok i am struggling a little because when use it, then some additional border appears at the end of document.
This red border is table border 1px solid red;
Everything working fine but how to get rid of lost border bottom to be not displayed? @Sander
Sander
October 5, 2022, 6:41am
5
I understand from your PM that your selector is now .table–sliced { border:botom: 1px solid red }. I’m not sure why you removed :not(:last-of-type), that part should have prevented it from being applied at the end. I’m afraid all I can do is guess since I can’t see your actual HTML and CSS.
Odyn
October 5, 2022, 6:56am
6
Sorry Sander i just dont understand why this border is not showing.
When I use You not(:last-of-type) it behave in same way, so all bottom-borders are on place fine, but this additional border appears also at the end
Well what I did now:
/* Table theme: Striped */
.table--sliced {
border: 1px solid black;
border-collapse: separate;
border-top: 0px;
border-left: 0px;
border-right: 0px;
/*border-bottom: 0px;*/
/*margin-bottom: 0em;*/
margin-bottom: 0em;
font-size: 9pt;
/*width: 96% !important;*/
/*margin-left: 0.18in !important;*/
border-bottom: 3px solid red; // This property set border under table and its ok
}
But at the end we have one more additional border:
So this is the end of table, and at the end of everything this border appears also. Is there any way to disable that?
There are a lot of code, can I send You some anonimized template and data mapper to present the issue? @Sander
Sander
October 5, 2022, 8:40am
7
:last-of-type only looks at the tag name (table), so if there are any tables after the last .table–sliced it won’t work - regardless of the classes on those tables.
Since you want to target tables immediately preceding a page break you could make use of the fact that we add a page_break_after class to elements that precede a page break:
.table--sliced.page_break_after {
border-bottom: 3px solid red;
}
An alternative would be to add a border style in a post-pagination script where you can see exactly how many .table–sliced matches there are.
Odyn
October 5, 2022, 8:58am
8
I tried this atm with page break after and it works fine for the breaked tables and end but inside the middle this red line shows in places where should not.
Could You please see my presets? @Sander
Sander
October 5, 2022, 9:19am
9
I added that code to the files you sent me and it looks fine to me. Can you please post a screenshot?
Odyn
October 5, 2022, 10:43am
10
Sure I will, for example my css now looks like this:
/* Table theme: Striped */
.table–sliced {
border: 1px solid black;
border-collapse: separate;
border-top: 0px;
border-left: 0px;
border-right: 0px;
/border-bottom: 0px; /
/margin-bottom: 0em; /
margin-bottom: 0em;
font-size: 9pt;
/width: 96% !important; /
/margin-left: 0.18in !important; /
border-bottom: 3px solid red;
}
.table–sliced.page_break_after { border-bottom: 3px solid red; }
And how looks in output (data mapper item 6)
Page 1 table:
Page 2 after table breaks
This RED line at the end, should not be there. @Sander
Sander
October 5, 2022, 10:57am
11
@Odyn remove the “border-bottom: 3px solid red” line from the .table–sliced rule.
Odyn
October 5, 2022, 11:16am
12
This border is almost ideal, add in places where should be missing @Sander but its still visible in some situations:
First page of invoice on some documents
End sometimes:
Sometimes for some reasons its visible
Sander
October 5, 2022, 12:31pm
13
@Odyn that is the “border: 1px solid black” style in your .table–sliced rule. I don’t understand why that line is there, I think you can remove these lines:
border: 1px solid black;
border-top: 0px;
border-left: 0px;
border-right: 0px;
/ *border-bottom: 0px;* /
Odyn
October 5, 2022, 12:44pm
14
@Sander
Removed and this do not changed nothing, well the bottom border on first page do not appear.
Is there any chance that You will review my css, because probably i dont see the issue
Erik
October 5, 2022, 1:09pm
15
@Odyn could you share the template and sample data?
Odyn
October 5, 2022, 1:22pm
16
Already shared with both of You
I dont understand why this border at the bottom sometimes display in wrong places.
Generally its missing when table box (Service box) breaks, when we fix it then it appears in other places of invoice where it should not be. @Erik
Erik
October 7, 2022, 11:49am
17
After offline conversations we found the following solution using CSS selectors.
.table--sliced.page_break_before {
border: none !important;
}
.table--sliced .separatorRow:last-child {
display:none;
}
.table--sliced.page_break_before .separatorRow:last-child {
display:table-row;
}
.serviceSurchargesPricing + .serviceSurcharges td.serviceSurchargesRecord {
border-top-width: 0px !important;
}
More info on CSS selectors is found here:
1 Like
Odyn
October 7, 2022, 11:59am
18
Problem has been solved.
I would like to especially thank Erik for his involvement in the search for the error and help in resolving it
1 Like
@Odyn Please suggest what was the exact solution. I am also facing the similar issue.
@Erik This solution is based on class , and we don’t have any decsription of mentioned class. Please suggest the exact solution.