Skip to content

Add more consistent padding config to components #985

Closed
@rreusser

Description

@rreusser

The problem: components are positioned in fractional coordinates, but axis labels take up a fixed amount of space relative to the screen. This makes it effectively impossible to create a consistent amount of padding between the plot and the labels when the plot size is changed. At the moment there seems to be some xpad and ypad attributes, but I think it needs to be more complete and consistent.

A solution: I propose adding a common padding: {t: ..., r: ..., b: ..., l: ...} attribute to most components. Ideally the logic could be hoisted up a level and DRYd up, but realistically, I feel like all components might just have to implement this positioning themselves. The result though is that it would be possible to carefully and precisely align components. This approach is consistent with what most people would probably expect based on html experience and is backward compatible if it defaults to zeros. Together with fractional positioning, I feel like you could at least get way closer to a satisfying layout.

Note: I'm running into this quite a bit as I try to align multiple components in an aesthetically pleasing way and trying to line up a slider with buttons is turning out to be particularly painful. Padding would instantly solve this.

Example: With identical config (apart from the size) that uses fractional padding to clear the axis labels, the small plot has a nice amount of space between the axis and the controls; the large plot has way too much space. http://codepen.io/rsreusser/pen/NRgbJy?editors=0010

screen shot 2016-09-27 at 23 28 13

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions