Input 100% width

Adobe XD UXP Plugin API
1

How to make input 100% width and fit it into parent? It worked before v.23 but is broken now. As I understand box-sizing: border-box; should be used but it seems to be not supported.
In my case I have something like:

<div style="width:100%; box-sizing: border-box; border: 1px solid red;">
<input type="text" style="display: block; width: 100%;" />
</div>

Now it looks like this:
image

PS: One more question - is there any way to subscribe to notifications about breaking changes?

2

@kerrishotts sounds like something in UXP has changed that affects this

3

I suppose margins were added into default styles but not compensated by the width. Anyway I thought if I provided version 21 in meta then these changes should not affect the plugin. Should we use maxVersion in manifest to avoid such issues?

4

@gdreyv Is this on macOS or Windows?

5

Note that you’ll get similar behavior on the web with this particular construct. XD 23 did have an update to a more recent version of UXP 3.3, so it’s possible that brought us closer to web spec. We did do a check for plugin compatibility and didn’t notice anything, but that’s never going to 100% cover every case.

Web (From Firefox):

image
image.png878×110 438 Bytes

Anyway, remove display: block on the input and it will work. If you want to avoid the margins, you can remove those too.

<div style="width:100%;  border: 1px solid red;">
<input type="text" style="width: 100%; margin: 0;" />
</div>

XD24:

image

1 Like
6

You are right about web, but on web I can use box-sizing: border-box which I can’t use in XD. Also in firefox it worked the same all the time, but in xd layout is changing from version to version.
Is there any kind of reset styles list or just some flag which we can use to remove all predefined by XD styles (like margins for input) to make layout more predictable?