[BUG]Something is wrong with scaling

[d01010101]

I use the snapshot sources. I followed "Get started". So I have put the widget into <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>. However, it turned out that the div inside, of the class luckysheet, had dimensions of 100x100 pixels. I needed to resize the browser just to make the div scale. It scaled too large, though. I attach a screenshot with "double" scrollbars. I would expect the external scrollbars to not exist at all. Probably, the widget thinks that is is smaller, when in reality it is larger. One of the reasons might be local cache restored information, which goes beyond the right margin, and also the large branding at the top.

• is there some resize api, to inform the widget that it should initially resize itself?
• how to get rid of the info about cache which looks like debugging, and which may cause the scaling problems?
• how to remove the branding, which may also cause the scaling problems? I would want a clean widget in a div.

[DR-Univer]

You can look at this api:
https://mengshukeji.github.io/LuckysheetDocs/guide/api.html#resize-setting

[d01010101]

luckysheet.resize(); causes a JS error: Uncaught TypeError: luckysheet.resize is not a function.

[DR-Univer]

Is the latest version? I tried it

[d01010101]

wbfsa, it is a snapshot which I downloaded few hours ago.

The resizing becomes perfect if I remove width: 100%; from the class luckysheet_info_detail. Otherwise, the header becomes wider than the underlying sheet (see the screenshot above, top right corner), this causes that a horizontal scrollbar appears, and this is turn decreases vertical space and makes the vertical scrollbar to appear.

Possibly it works well if the sheet is all alone in a web page. But in my case it is in another div. But removing width: 100%; makes the sheet have exactly 100%. With width: 100%; there are resizing problems. Possibly Luckysheet becomes more compatible with that style element removed?

[d01010101]

No, it is not the latest snapshot! I am sorry. Because of some problems, I changed for a moment to https://cdn.jsdelivr.net/npm/luckysheet/dist/. But now I really use the latest snapshot and the problems are different:

resize.js:20 Uncaught TypeError: Cannot read property 'offsetHeight' of null
    at luckysheetsizeauto (resize.js:20)
    at Object.resize (api.js:4626)
    at ?guest=:153
luckysheetsizeauto @ resize.js:20
resize @ api.js:4626
(anonymous) @ ?guest=:153
?guest=:331 

I also attach the resulting screenshot. The toolbar is now much wider than the sheet, and thus the horizontal scrollbar.

[DR-Univer]

The size and location of the luckysheet are determined by the container, if you want to show it at other postion, you can try it.

[d01010101]

See that the whole widget (the spreadsheet etc.) scales perfectly to the container, with the exception of the toolbar, so it looks like an internal bug. I use the div from the tutorial, which is in another div. Also, it does not explain the error after calling resize(): Cannot read property 'offsetHeight' of null.

[d01010101]

See the screenshot again, without scrolling: the sheet fits perfectly to the external component, but the toolbar is badly drawn and some of its elements escape beyond the right margin (see the previous screenshot). And only these misplaced elements of the toolbar cause that the horizontal scrollbar exists.

[DR-Univer]

Because luckysheet is loaded with a delay, if luckysheet.create is followed by resize(), an error will be reported.
You can try change config to hide menu. for example:

luckysheet.create({
  showtoolbar:false,
  showinfobar:false,
  showsheetbar:false,
  showstatisticBar:false
});

[DR-Univer]

Can you try the following code? relative is necessary.

<div style="position: relative;height: 500px;width: 500px;">
      <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</div>

[d01010101]

I would not want to hide the toolbar, if possible. Anyways, if I call resize() before create(), it also produces an error:

resize.js:20 Uncaught TypeError: Cannot read property 'offsetHeight' of null
    at luckysheetsizeauto (resize.js:20)
    at Object.resize (api.js:4626)
    at HTMLDocument.<anonymous> (?guest=:151)
    at r (plugin.js:1)
    at Object.fireWith [as resolveWith] (plugin.js:1)
    at Function.ready (plugin.js:1)
    at HTMLDocument.B (plugin.js:1)

If I call it after create(), the error is still there, but at least the spreadsheet actually resizes.

I have put into widget into <div style="position: relative;height: 500px;width: 500px;"> and I made sure that the position is relative. Now the spreadsheet is smaller and rectangular. I attach the screenshot. But the toolbar is still much wider than 500px and has drawing problems.

[DR-Univer]

Luckysheet is an excel-like spreadsheet, which may not be the same as a traditional table, so the number and size of cells are determined by the user. If you want to not display the horizontal scroll bar, you can only achieve it by setting the number of cells and column width.

sheet:
{
column:100, // Number of columns
row:100, // Number of rows
defaultColWidth:73, // width of columns
defaultRowHeight:19,// height of rows
}

Currently these need to be calculated by yourself, because we are not currently considering using it as a regular table. ^ ^

[DR-Univer]

the toolbar is still much wider than 500px and has drawing problems.
Regarding the toolbar, my performance here is correct. you can try like this:

lucksheet.create(...);
setTimeout(()=>{
   lucksheet.resize();
}, 1000);

And I found that your icon cannot be displayed normally, which may need to re-run npm run dev

[d01010101]

The horizontal scrollbar of the spreadsheet itself is of course normal. I was speaking about the horizontal scrollbar added by the browser because of the too-wide toolbar.

I will try your code tomorrow. But why won't you replace the delay with some lock inside the code, which waits asynchronously for the spreadsheet code to fully load?

[d01010101]

As of resize(), it was my fault, it was not really called after create(). As of scaling, the problem is still there, but caused by the toolbar which is too wide. I will thus close this bug and open another about the toolbar.