Table has additional spacing before content in cells

Peter Harari commented on Dec 2, 2019

Hi,

I'm using Table to generate a printable version of my system grid. In one case, the grid has a field which contains a multiple-line text, pre-formated by user in a textarea. This is my system grid:

I have to keep the format in the print versions, so I added white-space: pre to td styles of that column in the Table widget. It works fine!

The problem is that the cell content is being generated with an additional space before the content, which messes it up. This is the result of the Table widget:

In the DOM:

I made sure the content displayed does not comes with those spaces before. In the DB:

In the code:

Note that in the DOM print above, the rv attribute contains the original content without any extra spaces. It seems that there is a problem with the code that prints the cell value, or am I wrong?

Any advice on this?

David Winterburn commented on Dec 3, 2019

Hi Peter,

Please open the file KoolReport/core/src/widgets/koolphp/Table.tpl.php and replace the following code:

                        <td rv="<?php echo (in_array(gettype($value),array("array")))?"":htmlspecialchars($value);?>" <?php echo ($tdStyle)?"style='$tdStyle'":""; ?> <?php if($tdClass){echo " class='".((gettype($tdClass)=="string")?$tdClass:$tdClass($row,$cKey))."'";} ?>>
                            <?php echo Table::formatValue($value, $meta["columns"][$cKey], $row);?>
                        </td>

with:

                        <td rv="<?php echo (in_array(gettype($value),array("array")))?"":htmlspecialchars($value);?>" <?php echo ($tdStyle)?"style='$tdStyle'":""; ?> <?php if($tdClass){echo " class='".((gettype($tdClass)=="string")?$tdClass:$tdClass($row,$cKey))."'";} ?>><?php echo Table::formatValue($value, $meta["columns"][$cKey], $row);?></td>

Hope this solves your problem. Thanks!

Peter Harari commented on Dec 3, 2019

Hi David,

I suspected it could be something like that, but I didn't want to touch 3rd party codes. I can do that as a temporary fix but I woulk like to know if this can be added in your roadmap to be fixed in a future version, to avoid susprises after a composer update, you know what I mean?

Thank you.

David Winterburn commented on Dec 3, 2019

Hi Peter,

I see your point. We will discuss among the team about this request. One solution could be putting the cell's content inside a div/span tag. Then you could apply white-space:pre on td div/span. We will let you know soon about this direction. Thanks!

Peter Harari commented on Dec 3, 2019

Ok David, thank you so much.

Peter Harari commented on Dec 9, 2019

Hello David,

Any news on this subject ?

You see, I adopted the solution you have proposed, using a div with white-space: pre, but a problem appeared:

Look the text going all the way to the right:

I tried to fix that wrapping the whole text in a p tag, setting it to white-space: pre, instead of the div, like in this example, but I can't get it to work. Css in not my best skill.

Anyway, I would like to know if that improvement we discussed above will be implemented, because it would be so much easier to work with instead of creating an html/css structure for that.

Thank you.

David Winterburn commented on Dec 10, 2019

Hi Peter,

Which behavior or view do you expect if there's a long line of formatted text to be displayed? Thanks!

Peter Harari commented on Dec 10, 2019

Hi David,

To break the line.

Thank you.

David Winterburn commented on Dec 11, 2019

Hi Peter,

Please try white-space: pre-wrap; or white-space: break-spaces; to see how it looks. Thanks!

Peter Harari commented on Dec 11, 2019

Hi David,

In fact I hadn't tried break-spaces and it works. I'm only concerned about it's compatibility as it is not supported by Edge, as said here. Edge is a requirement for us.

Thank you.

David Winterburn commented on Dec 12, 2019

Hi Peter,

I think break-spaces and pre-wrap are pretty close except for end-of-line spaces. You could set white-space: pre-wrap only for Edge like this:

@supports (-ms-ime-align:auto) {
    .td div {
        white-space: pre-wrap;
    }
}

I'm not aware of another way to make Edge display formatted text more like break-spaces. Maybe you have more luck. Thanks!

Peter Harari commented on Dec 12, 2019

HI David,

Ok I will give a try. Anyway, I'm guessing you guys won't be fixing the suggestion I made.

I would like to ask you another thing, that is if could take over this topic, because I don't think that user is following it seriously.

Thank you.

David Winterburn commented on Dec 13, 2019

Hi Peter,

Does the formatted text show differently if you remove the blank space in td like this:

<td rv="<?php echo (in_array(gettype($value),array("array")))?"":htmlspecialchars($value);?>" <?php echo ($tdStyle)?"style='$tdStyle'":""; ?> <?php if($tdClass){echo " class='".((gettype($tdClass)=="string")?$tdClass:$tdClass($row,$cKey))."'";} ?>><?php echo Table::formatValue($value, $meta["columns"][$cKey], $row);?></td>

Is there a visual difference between

<td style="white-space:break-spaces">formatted text</td>

and

<td>
    <div style="white-space:break-spaces">formatted text</div>
</td>

Thanks!

David Winterburn commented on Dec 23, 2019

Hi Peter,

I've just found a solution for you to solve this problem without needing an update of the datagrid package. It should work for a foreseeable future as well:

 DataTables::create(array(
	...
	"options" => array(
		'columnDefs' => array(
			[
				"targets" => [3], //if 3 is the order of your formatted column
				"render" => "function(data, type, row) {
					return data.trim();
				}"
			]
		),

Let us know if this works your case. Thanks!

KoolReport's Forum

Table has additional spacing before content in cells #1198

Build Your Excellent Data Report