I can’t figure out the best way to control the width of the rendered content when embedding in another site. All the examples I’ve found online are on single-column sites where they allow the Observable content to render at 100vw. I have a multi-column site and need to constrain the rendered content to one column (much like observablehq.com does!)
I’ve attached a screenshot showing my issue. As you can see, the rendered content is in the main column, but since I can’t figure out how to control the width, it flows out under the right column and off the page.
I need this to work across all screen sizes.
I’ve gone through the docs many times now and can’t get it straight in my head how I might defined a custom Library class with an overridden ‘width’ function.
Thanks in advance!
Note: To clarify, I know I can set static widths in my notebook, but I would like to avoid that in order to keep things responsive.
It’s certainly possible, but I think you’ll have to override the definition of width from the standard library, which is based on window.innerWidth. I don’t believe we’ve published any notebooks that demonstrate how to override the standard library, but I’ll try to put one together shortly.
Thank you Mike! I’d tried to figure out how to do exactly that, but I don’t quite have my head around how all the various components play together just yet.
If I can hammer this out, I’d love to start playing with Observable on our site and have my dev team start experimenting with it, too.
Here you go:
The main “trick” is to define a custom library rather than using the stdlib. Here I extended the standard library to override the definition of width. (See live version.)
That looks like it should fit the bill! I’ll try to test it out tomorrow. I think this code snippet will be extremely useful for other folks in my situation trying to embed Observable content in existing sites. I can imagine this would be huge for the news industry (which I know you have a bit of a history in as well).
This worked like a charm. Thank you!