Image scaling in the tables

[brerra66it]

Detailed description of the problem

We have been using elabFTW for some time and for many of our experiments use combination of png-figures oragnized in tables.
After one of the updates table starts to scale figures randomly, making some of the earlier experiments unreadable any longer, as 400 px image shrinked down to 18px for some reason.

The behaviour is reproduced, I have made a new experiment and uploaded three images, free standing and in the table. They have the same size in the edit mode

but table is scaled in the view mode

the scaling appears random throughout our older experiments as well

Expected Behavior

I expect that tables keep the size of original png files as I see them in Edit mode

Steps to reproduce the behavior

1. Make new experiment
2. Create 2x3 table and add figures inside the lower row
3. Add captions FigA FigB FigC
4. Copypaste the figures above the table as free-standing images, add x between them for separation

What eLabFTW version are you using? Visible in bottom right of a page.

Powered by eLabFTW 5.0.4

Do you have any idea what may have caused this?

No response

Do you have an idea how to solve the issue?

No response

Additional information

No response

[brerra66it]

this is probably related to width parameter
<table style="border-collapse: collapse; width: 44.1159%;" border="1">
but this value generated by itself, this is what happened if the value is set to 10%

[NicolasCARPi]

Hello,

Thank you for reporting this issue, we will look into it eventually.

[brerra66it]

Hi, I think I have found workaround which will work for me.

It is mainly related to table properties feature, accesible in editor and then saved to source code, see the dialog below

For simplicity I investigated "width" parameter which accept two types of input:

• percentage, for example 10% - related to the width of browser window
• pixels, for example 1000px - fixed value, do not scale with browser modifications

As far as I understood, not only when width field left empty elab will use 100% as default, but each time you move the frame of the table, values are updated for the source code (in relation to current window size), that is how I got width: 44.1159% in the second comment.

If I want to avod smart scaling with percentage parameters I simply have to use px definitions for the tables, which cannot be fitted 100% to the screen. In the last figure I demonstrate how width parameter works for thin window

so the solution would be to calculate and inpur proper values in table properties

[brerra66it]

another thing to consider is that we very often specify individual images sizes, to match their heights, for example...
in this way scaling of the table will keep the height, but adjust the width, changing aspect ratio of original figure, and exactly this combinations make our books unreadable

and this kind of distortion you would not notice in edit mode!

apparently, scaling of the table goes on top of individual image settings

[brerra66it]

I have another perspective when I was looking at existing entries, which became unreadable. What I found in the source code is many lines similar to this <table style="border-collapse: collapse; width: 38.716%; height: 140.375px;" border="1"> for tables themself as well as for individual cells with images

<tr style="height: 681.181px;">
<td style="width: 50.0069%; height: 681.181px;"><img src="app/download.php?...

I have played with source code of existing entries as well, for me it worked nicely to use regexp for the source code in notepad++

• Find what: <td style.*;">
• Replace with: <td>

and similar for

• Find what: <tr style.*;">
• Replace with: <tr>

this way we remove all the hardcoded percentages and px for heights and widths of the individual cells.

There are also values for the tables itself, which can be located in source code as <table style=, one have to remove width and height values from there as well, so it look like <table style="border-collapse: collapse; border-width: 1px;" border="1">

after such processing entry looks nice in view mode as well, as long as noone tries to update or scale them

[MarcelBolten]

@NicolasCARPi
There are some tinymce settings that might be of interest:
https://www.tiny.cloud/docs/tinymce/latest/table-options/#controlling-resizing-of-tables