in qtextdocument table border not rendred, why? - qt

I am working with Qtextdocument to generate a report, I have programmatically prepared a table string as html string, but when I render it the borders are not shown(picture 2)
In browser I get (picture 1)
but in my Qt App I get (picture 2)
and here is the string example:
<html>
<head>
<style>
table, th, td { white-space: nowrap; border: 1px solid black; border-collapse: collapse; padding: 2px 4px; text-align: center;}
</style>
</head>
<body>
<table width="100%">
<colgroup span="2" style="border: 2px solid black;">
<colgroup span="7" style="border: 2px solid black;">
<colgroup span="7" style="border: 2px solid black;">
<colgroup span="9" style="border: 2px solid black;">
<colgroup span="8" style="border: 2px solid black;">
<colgroup span="1" style="border: 2px solid black;">
<tr>
<td colspan="2" > <img src="Log1.png" width="192" height="86"/></td>
<td colspan="31" > Title line1<br/>line2</td>
<td> <img src="Log2.png" width="86" height="86" /> </td>
</tr>
<tr>
<td>Month:</td><td>june-19</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>Total</td>
</tr>
<tr>
<td colspan="2">col span 2</td><td colspan="7">col span 7</td><td colspan="7">col span 7</td><td colspan="9">col span 9</td><td colspan="8">col span 8</td>
</tr>
<tr style="border:2px solid black;">
<td colspan="34">long line sub title</td>
</tr>
<tr>
<td rowspan="3">item1</td>
<td>item1.1</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td></td><td></td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>29</td>
<tr>
<td>item1.2</td><td></td><td></td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>29</td>
</tr>
<tr style="border-bottom:2px solid black;">
<td>item1.3</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>31</td>
</tr>
<tr>
<td rowspan="2">item2</td>
<td>item2.1</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>31</td>
<tr style="border-bottom:2px solid black;">
<td>item2.2</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td></td><td>28</td>
</tr>
<tr>
<td> item3</td>
<td>item3.1</td><td>X</td><td>X</td><td>X</td><td>X</td><td></td><td></td><td></td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>28</td>
</tr>
</table>
</body>
</html>


Instead of using a half-backed approach using QTextDocument and QLineEdit, that seemingly supports just a subset of HTML you should pursue the full-blown approach by using QWebEngineView, if this fits your requirements.
If your requirements are just to create a report, that shouldn't be edited by the user in a QLineEdit you should definitely give QWebEngineView a try. I'm using it to create reports in various apps and the printing option as a PDF is definitely an asset.
The following worked for me and nicely draws the borders:
#include <QApplication>
#include <QWebEngineView>
#include <QIODevice>
#include <QFile>
int main(int argc, char** args) {
QApplication app(argc, args);
QFile file("./data/test.html");
file.open(QIODevice::ReadOnly);
QString content=QString::fromStdString(file.readAll().toStdString());
auto webView = new QWebEngineView;
webView->setHtml(content);
webView->show();
QObject::connect(&app, &QApplication::aboutToQuit, [&webView]()
{
webView->deleteLater(); // Prevents crash
});
app.exec();
}

Related

css not selector not working, not sure why

I am trying to use the css not selector but not having much success. I am trying to apply attributes to images except for those in a .sponsors class.
img:not(.sponsors) {
width: initial;
max-width: 100%;
height: auto;
}
However it's applying the attributes to all images. The images in a sponsor class are in a table
<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
Any help would be appreciated

If you are using :
img:not(.sponsors) {
}
The "sponsors" class must be in an img tag.
In your example it should be :
<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img class="sponsors" src="image1.jpg" /></td>
<td style="width: 50%;"><img class="sponsors" src="image2.jpg" /></td>
</tr>
</tbody>
</table>
Simple test for that : https://jsfiddle.net/c31nq2dh/
Try to move the class property and observe the result

For simplicity I've changed the CSS rule to border: solid 5px red; just to see where it gets applied.
The CSS :not() selector works on elements which have the class. See only the element which does not have the class sponsors gets the red colored border
img:not(.sponsors) {
border: solid 5px red;
}
<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img class="sponsors" src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
But your HTML has the class sponsors on the parent element. Add whatever rules you need to set or reset on the images like so:
.sponsors img {
border: solid 5px red;
}
<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>

CSS filter brightness makes gridlines vanish

I have a table with two CSS brightness filters applied:
#MyTable tr:nth-child(even)
{
filter: brightness(85%);
}
#MyTable td:nth-child(even)
{
filter: brightness(85%);
}
to clearly delineate rows and columns when individual cells can vary in background colour.
But the black gridlines (borders) are behaving very oddly.
In Firefox (51):
The right and bottom gridlines of all filtered cells are replaced with the background colour. White cells keep their gridlines. The behaviour is the same whether filters are applied to rows, columns or both.
In Chrome (56):
If I apply just the first filter, which alternates row brightness, then the top gridline and left gridline of coloured cells in even rows become the same colour as the background. White cells keep their gridlines.
If I apply just the second filter, which alternates column brightness, everything works fine.
If I apply both filters, the top and left gridlines of coloured cells in even rows but odd columns become the same colour as the background. Again, white cells, cells which are in even columns (i.e. have a filter), or cells which are in odd rows (i.e. don't have a filter), keep their black gridlines.
This also happens if I select even rows using a class instead of tr:nth-child(even).
What is causing this, and how do I fix it?
Edit - minimal working example:
<html>
<head>
<style>
#MyTable {
border-spacing: 0;
border-collapse: collapse;
}
#MyTable td {
margin: 0;
padding: 20px;
border: 1px solid black;
}
#MyTable tr:nth-child(even)
{
filter: brightness(85%);
}
#MyTable td:nth-child(even)
{
filter: brightness(85%);
}
</style>
</head>
<body>
<table id="MyTable">
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td style="background-color: red;">E</td>
<td style="background-color: red;">F</td>
</tr>
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td>E</td>
<td style="background-color: red;">F</td>
</tr>
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td style="background-color: red;">E</td>
<td style="background-color: red;">F</td>
</tr>
</table>
</body>
</html>

I'm definitely not sure what's going on, or what even ought to be happening according to the spec. It might be undefined behavior.
I did notice that the rule border-collapse: separate will prevent the borders from disappearing.
#MyTable {
border-left: 1px solid black;
border-top: 1px solid black;
border-spacing: 0;
border-collapse: seperate;
}
#MyTable td {
margin: 0;
padding: 20px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#MyTable tr:nth-child(even) {
filter: brightness(85%);
}
#MyTable td:nth-child(even) {
filter: brightness(85%);
}
<html>
<body>
<table id="MyTable">
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td style="background-color: red;">E</td>
<td style="background-color: red;">F</td>
</tr>
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td>E</td>
<td style="background-color: red;">F</td>
</tr>
<tr>
<td style="background-color: red;">A</td>
<td style="background-color: red;">B</td>
<td style="background-color: red;">C</td>
<td style="background-color: red;">D</td>
<td style="background-color: red;">E</td>
<td style="background-color: red;">F</td>
</tr>
</table>
</body>
</html>

Change color of <td> if data found in table

I am creating a web app in which I have a textbox:
<input type="text" style="height:30px; width:240px;" placeholder="Enter Data" />
... and a table which is fetching data from my webservice in an angularjs controller:
<table id="table" class="table table-bordered font" style="width:100%; margin-top:30px; background-color:white; padding-top:10px;">
<tr class="bg-primary textalign">
<th>Employee Name</th>
<th>From</th>
<th>To</th>
<th>Month</th>
<th>Year</th>
<th>Reason</th>
<th>Leave Id</th>
</tr>
<tr ng-repeat="x in sonvintable| filter:paginate" style="border: 2px solid #F3F3F3;">
<td style="border: 2px solid #F3F3F3;">{{x.empname}}</td>
<td style="border: 2px solid #F3F3F3;">{{x.from}}</td>
<td style="border: 2px solid #F3F3F3;">{{x.to}}</td>
<td style="border: 2px solid #F3F3F3;">{{x.month}}</td>
<td style="border: 2px solid #F3F3F3;">{{x.year}}</td>
<td style="border: 2px solid #F3F3F3;">{{x.reason}}</td>
<td style="border: 2px solid #F3F3F3;">{{x.leaveid}}</td>
</tr>
</table>
This is how my data is displayed in my table:
Employee Name From To Month Year Reason Leave Id
Alpesh Renuse 26-02-2016 27-02-2016 2 2016 Personal 353
Alpesh Renuse 09-05-2016 28-05-2016 5 2016 Personal 402
Alpesh Renuse 07-09-2016 10-09-2016 9 2016 Personal 441
If a user enters 26 or 2016 or anything from the table, then the color of the particular <td> must be changed.

Use ng-class:
First you need a CSS class with the color you need to change,
.change-color {
color: yellow;
}
Then add a ng-model on your search <input>,
<input ng-model="searchWith" type="text" style="height:30px; width:240px;" placeholder="Enter Data" />
Then declare a new function in your controller:
$scope.search = function (feildValue, searchWith) {
if (searchWith) {
return (feildValue.indexOf(searchWith) !== -1);
}
return false;
}
Then add ng-class="{'change-color': search(x.<whatever>, searchWith)}",
<tr ng-repeat="x in sonvintable| filter:paginate" style="border: 2px solid #F3F3F3;">
<td ng-class="{'change-color': search(x.empname, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.empname}}</td>
<td ng-class="{'change-color': search(x.from, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.from}}</td>
<td ng-class="{'change-color': search(x.to, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.to}}</td>
<td ng-class="{'change-color': search(x.month, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.month}}</td>
<td ng-class="{'change-color': search(x.year, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.year}}</td>
<td ng-class="{'change-color': search(x.reason, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.reason}}</td>
<td ng-class="{'change-color': search(x.leaveid, searchWith)}" style="border: 2px solid #F3F3F3;">{{x.leaveid}}</td>
</tr>

You can use ng-class
As, ng-class resolves angular expressions, you can directly write the logic in ng-class property. No need of a function even.
Here is your required solution, start tying in the text field and check the color change.
Type: 2016, Compensate, Personal, 2015, Alpesh Renuse etc
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sonvintable = [
{
'empname': 'Alpesh Renuse',
'from': '26-02-2016',
'to': '27-02-2016',
'month': '2',
'year': '2016',
'reason': 'Personal',
'leaveid': '402',
},{
'empname': 'Alpesh Renuse',
'from': '11-11-2011',
'to': '15-15-2015',
'month': '5',
'year': '2011',
'reason': 'Compensate',
'leaveid': '403',
},
{
'empname': 'Alpesh Renuse',
'from': '12-12-2012',
'to': '17-12-2012',
'month': '6',
'year': '2012',
'reason': 'Official',
'leaveid': '404',
}
];
});
.change-color
{
color:blue;
background: green;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="searchWith" type="text" style="height:30px; width:240px;" placeholder="Enter Data" />
<table id="table" class="table table-bordered font" style="width:100%; margin-top:30px; background-color:white; padding-top:10px;">
<tr class="bg-primary textalign">
<th>Employee Name</th>
<th>From</th>
<th>To</th>
<th>Month</th>
<th>Year</th>
<th>Reason</th>
<th>Leave Id</th>
</tr>
<tr ng-repeat="x in sonvintable| filter:paginate" style="border: 2px solid #F3F3F3;">
<td ng-class="{'change-color': (searchWith && x.empname.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.empname}}</td>
<td ng-class="{'change-color': (searchWith && x.from.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.from}}</td>
<td ng-class="{'change-color': (searchWith && x.to.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.to}}</td>
<td ng-class="{'change-color': (searchWith && x.month.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.month}}</td>
<td ng-class="{'change-color': (searchWith && x.year.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.year}}</td>
<td ng-class="{'change-color': (searchWith && x.reason.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.reason}}</td>
<td ng-class="{'change-color': (searchWith && x.leaveid.indexOf(searchWith) > -1)}" style="border: 2px solid #F3F3F3;">{{x.leaveid}}</td>
</tr>
</table>
</div>
</body>
</html>
Please run above snippet
Here is a working Demo

Displaying text inline in html table

I would like to achieve this
Example of table
Number : 123
456
Mobile : 123
However i am achieving something like this
123
Number : 456
Mobile : 123
I am using <td> and <tr> in html.
How do I ensure that the cell is able to handle newline characters and display them as according to my first output
.td-custom {
border: 0px solid black;
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="tableContainer" cellspacing="100px">
<tr>
<td class="td-custom">Name:</td>
<td class="td-custom">Name</td>
</tr>
<tr>
<td class="td-custom">Status Message:</td>
<td class="td-custom">Hey i am using ........... lololol
<br>asda</td>
</tr>
<tr>
<td class="td-custom">date:</td>
<td class="td-custom">21st Jan 2015</td>
</tr>
<tr>
<td class="td-custom">Remarks:</td>
<td class="td-custom">Nil</td>
</tr>
</table>

A working example of #Thomas solution with
.td-custom {
border: 0px solid black;
width: 200px;
vertical-align: top;
}
https://jsfiddle.net/ukq61zcb

IE 8 table padding issue

I've created a table which has the following code:
<table class="details resultTable">
<thead class="details">
<tr class="details">
<th class="details headerText">Heading 1</th>
<th class="details headerText">Heading 2</th>
</tr>
</thead>
<tbody class="imu-details-view">
<tr class="details">
<td class="details">Text 1</td>
<td class="details">Text 2</td>
</tr>
</tbody>
</table>
here is the CSS for the table
resultTable {
border-collapse: collapse;
text-align: left;
width: 100%;
}
resultTable th {
border-bottom: 2px solid #6678B1;
padding: 10px 8px;
}
resultTable td {
border-bottom: 1px solid #CCCCCC;
padding: 6px 8px;
}
Now the issue I'm having is, in Firefox the table looks like so:
and then in IE 8/9 this is what it looks like:
can some one explain how I can make the IE table look like the Firefox one?

Try below code. add align=left to tag.
<th align="left" class="details headerText">Heading 1</th>
<th align="left" class="details headerText">Heading 2</th>

Resources