search

jsreport / jsreport-html-to-xlsx

jsreport recipe capable of converting html into excel
GNU Lesser General Public License v3.0
11 stars 3 forks source link

CSS attribute inside style tag is not applied #22

Open olivierr91 opened 5 years ago

olivierr91 commented 5 years ago

Upgraded jsreport from 1.10 to 2.4 and found my CSS to be broken.

<!DOCTYPE html>
<html>
<body>     
    <style>body { font-size: 8px }</style>

    <table>
        <tbody>
                <tr>
                    <td>bla</td>
                </tr>
        </tbody>
    </table>
</body>
</html>

Actual result: Font size in Excel cell is unchanged (12). Expected result: Font size in Excel cell should be 8. https://jsfiddle.net/2xng5huk/

image

This is a regression, this was working in jsreport version 1.10.

bjrmatos commented 5 years ago

hi! yes, actually we found this problem during development but we decided that changing the style that way it was not very common, i mean using a html or body selector to change the font-size.

td  {
  font-size: 18px; 
}

i think this should work too

* {
  font-size: 18px; 
}

the solution is to change your selector a bit, we don't know exactly why the browser engine got confused about that css rule, maybe it was because a newer version of chrome

olivierr91 commented 5 years ago

Ok, let me try that before closing the issue. Your second solution is not a very good practice, if you want to override the style later you have to use !important flag for every attribute you want to override, it makes messy CSS code, it slows browser rendering and it's against the "cascading" nature of Cascading Style Sheets.