Embedded width

Community Help
1

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.

12
Screenshot 2018-08-07 17.57.12.png3312×1320 622 KB

2

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.

3

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.

4

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.)

5

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).

Thanks again!

6

This worked like a charm. Thank you!