How to reduce the min size of an sl-input control?

[martin-slater]

Hi there, I am trying to reduce the minimum width of an sl-input control so it will shrink more when the parent shrinks.. Currently it will overflow which I am trying to avoid. I cannot figure out how to do this though, does anyone have an idea on how to do this in shoelace?

[claviska]

By default, inputs are sized to fit their container. The following shows a <div> at 50px wide and the input fits inside of it.

https://codepen.io/claviska/pen/dymoodV?editors=1000

Perhaps you have a style targeting the <sl-input> that's causing it to overflow.

[robaho]

I am not sure this is working correctly in all cases. When using

<table><tr><td width="50px"><sl-input>

it does not size to fit the space.

[claviska]

Tables adapt to their content and don't always adhere properly to set widths. What you're looking for, in that case, is max-width.

<table>
  <tr>
    <td style="outline: dotted 2px tomato; max-width: 50px;">
      <sl-input></sl-input>
    </td>
  </tr>
</table>

Result (shown zoomed in):

[maelcaldas]

I had the same issue when set display: flex to the container.

Adding min-width: 0 to the sl-input, as described here solved the issue for me.

[trailsnail]

Ran into the same issue again ... and again ... and again. After half of a year you forget the solution and search again 🤣