KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.

Table has additional spacing before content in cells #1198

Open Peter Harari opened this topic on on Dec 2 - 10 comments

Peter Harari commented on Dec 2

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

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

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

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

Ok David, thank you so much.

Peter Harari commented 3 days ago

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 2 days ago

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 2 days ago

Hi David,

To break the line.

Thank you.

David Winterburn commented 1 day ago

Hi Peter,

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

Peter Harari commented 23 hours ago

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 2 hours ago

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!

KoolReport Is Free and Open-Source!

KoolReport is a professional php reporting framework which saves you tons of time to construct dynamic data report & dashboard.

  • Connect to various datasources such as MySQL, SQL Server, MongoDB or even from CSV or Excel file.
  • Contain series of powerful built-in data processes for your data manipulation.
  • Generate stunning charts and graphs to help you communicate data insights to your audiences effectively.
  • Integrate seamlessly with any php frameworks such as Laravel, CodeIgniter, Symfony.
Download Now and register our tutorials to get started!

Download KoolReport
help needed

Export