Drawer styling bugs

[nickdunn]

I've discovered two drawer styling bugs while migrating Documenter to use it. Both are caused by the content overflow.

Firstly if the content is long and a vertical scrollbar is created inside the drawer, the content will overflow horizontally. This is because the drawer contents has a fixed width (260) and padding (2x20) but the scrollbar encroaches into this. The result is a horizontal scrollbar:

One solution might be to add another container into the markup to take the padding.

The second bug is height. If the original Symphony page is long and requires scrolling, the drawer's height will only be the height of the visible viewport and not the height of the page:

This is caused by bottom: 0; on the drawer. Removing this and it works (in Chrome) when the page is long. But then the drawer is too short when the page doesn't scroll. Gah!

[klaftertief]

I'll have a look at it later today. Hope I have some CSS mojo left then.

[nickdunn]

Cheers :-)

[klaftertief]

I removed the set width in the CSS. It was there only to prvent a reflow of the contents during animation.

@nilshoerrmann Wanted to let you know about the changes because I think you have the best overview about the backend styles.

[nilshoerrmann]

Thanks, Jonas.

[nickdunn]

The lack of width is pretty messy when the copy is long — you see it compress and resize as the drawer expands and contracts. I remember testing with a form a while ago and the floated form elements jumped about. Perhaps a min-width, of 300px minus whatever the maximum likely scrollbar would be (20px IE/Win), so 280 or 275? That might mitigate it somewhat.

[klaftertief]

I thought about changing from animating the width of the vertical drawers to animate their position. I'll have a play with it tomorrow.