search

observablehq / inputs

Better input elements
https://observablehq.com/framework/lib/inputs
ISC License
126 stars 34 forks source link

Support for wider labels (without wrapping) #57

Open CobusT opened 3 years ago

CobusT commented 3 years ago

I was trying to force the label to be wider, but couldn't get it to work using

<span style="white-space: nowrap; display:block; ">this is a long label that I don't want to wrap or cut off

It would be great to have an option for the label to define the width of the label and push the input out.

mootari commented 3 years ago

Having CSS custom properties for most measurements would be ideal. These could then be overridden through inline styles set on each root element.

https://github.com/observablehq/inputs/blob/f72d22b4a8302922d1f86adb15fdfe6289950254/src/style.css#L1-L5

To provide a consistent API, overrides could be passed to constructors via the options. E.g.:

.__ns__ {
  --label-width: 120px;
}
Range([0, 1], {
  style: {
    'label-width': '240px',
  }
})
<form class="oi-5f34c7" style="--label-width:240px">
mootari commented 3 years ago

I would also recommend to expose the CSS namespace, so that it can be referenced dynamically in custom stylesheets.

mbostock commented 3 years ago

I’ve adopted CSS custom properties in eb1e7c5659cdef9d83711598db95d706ee8fbd55 (and fixed a related bug in Hypertext Literal https://github.com/observablehq/htl/issues/28). So, you can now redefine the --input-width or --label-width custom properties to change the layout (possibly globally), although I haven’t yet exposed the CSS namespace because I haven’t decided yet if I want to go that route.

oscar6echo commented 3 years ago

Nice ! Where could I see an example ?

CobusT commented 3 years ago

Nice ! Where could I see an example ?

I showed a few methods at the bottom of this notebook https://observablehq.com/d/ab8cd2ed34740752?collection=@cobus/quick-demos