FET Forum

FET Support (English) => Tips and Tricks => Topic started by: Benahmed Abdelkrim on May 19, 2016, 08:59:56 AM

Title: edit css file
Post by: Benahmed Abdelkrim on May 19, 2016, 08:59:56 AM
HI,...
     I want to print 2 tables on each page. yes I know; I need to change the file.css, but I do not know how. is that you have an idea?
Title: Re: edit css file
Post by: Volker Dirr on May 19, 2016, 01:50:35 PM
You can see this in the css file:
table.odd_table {
  page-break-before: always;
}

table.even_table {
  page-break-before: always;
}


Remove the second (even) page-break line (not the first one), so it should look like this:

table.odd_table {
  page-break-before: always;
}

table.even_table {
 
}
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 19, 2016, 01:59:18 PM
  thank you so much;
and how to do if you want to print 3 pages at once?

Another question if you allow: how to delete the sentence: "back to the top" that is between the tables.
Title: Re: edit css file
Post by: Volker Dirr on May 19, 2016, 07:00:03 PM
Search this:
p.back {
  margin-top: 4ex;
  margin-bottom: 5ex;
}


And modify to this:
p.back {
  margin-top: 4ex;
  margin-bottom: 5ex;
  display:none;
}
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 19, 2016, 08:11:11 PM
thank you, mr volker for your Quick response , but the tables are pushed together, how to separate?
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 19, 2016, 08:20:28 PM
 i think i found it:
search this.
table {
  text-align: center;
}

and modify to this:

table {margin-top: 7ex;
  text-align: center;
}

the number(7) can be changed.
think you so much, mr volker.
regards.
Title: Re: edit css file
Post by: Volker Dirr on May 19, 2016, 10:22:09 PM
Yes, that is a solution. (adding a margin at the table)

Sadly i didn't add a solution to add 3 tables on a paper.
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 21, 2016, 08:01:45 AM
other solution:
we open the html file of table with a code editor like Notepad ++, then follow:
Notepad++ -> Search -> find .
a small window opens, click on: Replace.
in the field: Find what, you write: Back to the lop.
let the field: Replace with, empty.
Then we click the right button: Replace all.
then close the small window, and click save.
Finally, open your html file, as you made Normally.
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 22, 2016, 09:02:36 PM
 a solution to add 3 tables on a paper:
...
/* To do a page-break only after every second timetable, delete "page-break-before: always;" in "table.even_table". */
/* To hide an element just write the following phrase into the element: "display:none;" (without quotes). */
p.back {display:none;
  margin-top: 4ex;
  margin-bottom: 5ex;
}
p {
page-break-after: always;  /* impose page break aprés la liste non ordoné ul */
}

table {page-break-inside: avoid; /* to avoid cuts in printing tables */
  text-align: center;
}



table.odd_table {
/*  page-break-before:always; */

}

table.even_table {
/* page-break-before:always; */
}

table.detailed {
  margin-left:auto; margin-right:auto;
  text-align: center;
  border: 0px;
  border-spacing: 0;
  border-collapse: collapse;
}

caption {margin-top:30px;

}

thead {

}

/* Some programs import "tfoot" incorrectly. So we use "tr.foot" instead of "tfoot". */

tr.foot {

}

tbody {font-size:10px; /*  to adjust the size of the tables  */

}

th {

}

td {

}

td.detailed {
  border: 1px dashed silver;
  border-bottom: 0;
  border-top: 0;
}
...
...
...


I attached the file. css.
Title: Re: edit css file
Post by: Volker Dirr on May 22, 2016, 09:22:17 PM
you add a page-break after each <p>-element.
so it will also break after each "back to the top".
i guess you removed that with an editor. i guess you removed the whole "<p class="back"><a href="#top">back to the top</a></p>"
but your solution is then still just luck. as soon as the table is a bit longer or shorter, it will break after an other number of tables.
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 22, 2016, 09:32:00 PM
 if you see the code, you see that I removed "back to the top."
I attached an example:
Title: Re: edit css file
Post by: Volker Dirr on May 22, 2016, 09:46:00 PM
yes, exactly what i thought.
so in fact you don't do a page-break after tables at all.
it is just luck that you have got 3 on a page.
see the attached picture.
i opened your file and "only" reduced the font-size down to 50% with firefox (NOT with css!).
Now there are 5 tables on a page.
so it only depend on the font size that there are 3 tables. if you have got larger tables (larger font-size, more hours per day, more teachers per activity, ...), then there won't be a page break after 3, it will be earlier.
if you have smaller font size, less hours per day, ..., then the break will be later, so there will be more tables on a paper.
but html doesn't guaranties, that the table won't break at all. so you just have luck. you didn't set a page-break at all after the tables.
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 22, 2016, 10:00:29 PM
 yes, that's what we wanted, control the number of tables you want to print per page, we adjusted the "font-size". This is a tip if you want.
Title: Re: edit css file
Post by: Volker Dirr on May 22, 2016, 10:08:59 PM
Sadly html doesn't guarantee that the last table on a page won't be split to the next page. so it depend on your tables and your web browser. if you have got longer tables (more rows) your web browser will split the table. so this "tip" is only a workaround which might fail. the changes that it will fail increase dramatically with older web browsers and with higher number of rows. it is not a real page-break. it is just luck.
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 22, 2016, 10:15:51 PM
 may be a chance, maybe not. essential that it works, especially with Google Chrome latest version.
another example
Title: Re: edit css file
Post by: Volker Dirr on May 22, 2016, 10:35:37 PM
yes, it highly depend on the web browser.
if i open your file with chrome and try to print on DIN A4, then there are always 3 tables on a paper.
if i open your file with firefox and try to print on DIN A4, then there are around 50% pages with 2 tables and around 50% with 3 tables.

but it is still luck. it won't work with schools with a higher number of rows.
but schools with lower number of rows can benefit from your "page-break-inside: avoid;".
i think i should add that as default value. it still doesn't guarantee that it won't break, but it try at least to avoid it. i think that is the good "tip".

thank you for suggesting.
Title: Re: edit css file
Post by: Benahmed Abdelkrim on May 22, 2016, 10:36:42 PM
You are welcome! :)
yes you are right, html does not guarantee that the last table is not divided, but for now this is a temporary "solution",  waiting for another better, why not ...
yours faithfully.