Skip to content

iframe inserted into "dynamic" table header #10597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
hAbuMustafa opened this issue Aug 22, 2023 · 4 comments
Closed

iframe inserted into "dynamic" table header #10597

hAbuMustafa opened this issue Aug 22, 2023 · 4 comments
Labels
awaiting submitter

Comments

@hAbuMustafa
Copy link

hAbuMustafa commented Aug 22, 2023 •
edited
Loading

Describe the bug

I made a dynamic table which columns are displayed upon user preference, using stores.
When the user choses to display the last column a weird <iframe> is inserted in the <thead> row elements before the newly displayed <th> element. And this, of course, breaks the table flow.

Reproduction

Make a table like the following tree:

<script>
  import {showColumnB} from '$lib/stores/preferences';
</script>

<table>
  <thead>
    <tr>
      <th>A</th>
      {#if $showColumnB}
        <th>B</th>
      {/if}
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
        {#if $showColumnB}
          <td>B</td>
        {/if}
    </tr>
  </tbody>
</table>

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 436.07 MB / 7.84 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 115.0.5790.173
    Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.183)
    Internet Explorer: 11.0.19041.1202

Severity

serious, but I can work around it

Additional Information

I get the following iframe inserted before the last column:

<iframe style="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;" aria-hidden="true" tabindex="-1" src="about:blank">
   <html><head></head><body></body></html>
</iframe>

I made sure all browser plugins are disabled but still got the same output.
@gtm-nayan
Copy link
Contributor

Please provide a proper reproduction for the issue as instructed by the issue template:

A link to a repository, or a fork of https://node.new/sveltekit, that reproduces the issue. Reproductions must be short, self-contained and correct and must not contain files or code that aren't relevant to the issue.

A single code snippet with missing imports does not meet the above criteria. Dimension bindings may be one possible reason for your issue.

@hAbuMustafa
Copy link
Author

Please provide a proper reproduction for the issue as instructed by the issue template:

A link to a repository, or a fork of https://node.new/sveltekit, that reproduces the issue. Reproductions must be short, self-contained and correct and must not contain files or code that aren't relevant to the issue.

A single code snippet with missing imports does not meet the above criteria. Dimension bindings may be one possible reason for your issue.

Here's a repo to reproduce the bug. Because I needed the thead height to stack several sticky rows, as shown in the repo.

It is TRUE that it is caused by the dimension binding. Because I needed the thead height to stack several sticky rows, as shown in the repo.

I originally had a temporary solution by using display: none; role on all iframe elements. and now I preferred shifting to controlling colgroups with visibility: collapse; on the selected col for a more neat code.

@pawelblaszczyk5
Copy link
Contributor

This should belong to Svelte repo, not SvelteKit specific. However, the reason are size bindings they use iframe trick to react to resize because they're created before ResizeObserver was introduced

You can use new ones that utilize ResizeObserver under the hood and don't need the iframe, check out here

sveltejs/svelte#8022

@gtm-nayan
Copy link
Contributor

Yeah ResizeObserver bindings would be the way to do this now. If you absolutely need to use the old way for legacy reasons, you can maybe bind to dimension updates on a hidden element placed inside the table cell.

Likely not much we can do here otherwise.

@gtm-nayan gtm-nayan closed this as not planned Won't fix, can't repro, duplicate, stale Aug 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting submitter
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hAbuMustafa @gtm-nayan @pawelblaszczyk5