possible bug with button

Community Help
1

I have created a save as csv button in this notebook: https://observablehq.com/@bgits/crypto-networks-exploration-with-data-export

using the same download as csv approach shown here: https://observablehq.com/@palewire/saving-csv

Why is the button in my notebook right aligned and has broken styling?

2

The “table” import is setting the style on all download buttons, not just its own - see the part that begins with this:

a[download] {
	position: absolute;
	...

To fix the positioning, you can set an inline style on the download button like this:

{
  const button = DOM.download([1,2,3,4,5], null, "Download Price Data as CSV");
  button.style.position = 'relative';
  // similarly, override other styles here
  return button;
}

A better long-term solution might be to fork the table notebook and change its table cell so that its styles are more specific, e.g. by adding named classes to everything.

Here’s a word on how to debug this sort of thing:

If you open your browser’s dev tools, there should be a button that lets you select an element on the page and inspect its style (here’s what it looks like in Chrome):
11

If you click on the <button> tag itself, nothing seems too suspicious, but if you go to its containing <a download> tag, you see the offending style above:
20

If you the click on <style>...</style>, the DOM inspector will then highlight the <style> tags which insert that snippet of CSS, and it’s clear then that this is coming from the imported table cell.

1 Like
3

Alternatively, you can use the new built-in download-as-CSV functionality: