How to resize controls?

[howesteve]

Hello,

I'd like to know if there is a recommended, or "official" way of resizing form controls? They are tailwind forms based, and I find them huge. I tried:

1. Just using h-XX and w-XX properties. Problem is, there is a lot to adjust, specially when using input-groups.
2. I've tried tailwind's scale-XX property, which would be a great shortcut, but it ruins padding.

Thanks.

[endigo9740]

Hey @howesteve, I'd recommend avoiding scale. It will provide very uneven results. The size is a concern we shared as well, which is why we will be scaling these smaller in the next major iteration of Skeleton. It's still early days, but you can preview our new doc sit here showing this:
https://next.skeleton.dev/tailwind/forms

In the meantime, you can scope out how we set the default styles for v2 in the source here::
https://github.com/skeletonlabs/skeleton/blob/master/packages/plugin/src/styles/components/forms.css

What I might suggest is setting a smaller padding as well as the default text size. The combination of those should get you in the ballpark.

If you find that too troublesome, consider removing the Skeleton .input class and replace with a version of your own. That's one of the biggest benefits of the opt-in classes. You can swap them out if you wish.

[howesteve]

Thanks for the reply. Yes, using scale did not work well for me, as shown in the pic above. Too bad, would be sweet.

I was hoping there was an easier way to do resize controls without using h-X, w-XX, p-XX etc., because when it's just that you want to resize, it's easy; but when you consider: an input-group; an input-group-shim with an icon; paddings, margins, font sizes; the same for all controls (select, checkbox, radio, etc.) ... it can get hairy pretty soon.

About the next version, it looks good, but I don't see any sizing classes - looks to be using the same base from v2? Is there any difference in that matter from that beta to V2?

[endigo9740]

I've never seen an example of inputs having multiple sizes in a UI library. If you can point me to some resources for such we'll consider it, but typically inputs have a fixed size. They're highly functional features, so readability is paramount.

Per v3, the inputs are slightly smaller already and should match other popular UI libraries form input styles and sizes.

But again, if you don't like the way we're handling it, just drop the .input class and handle it however you wish.

[howesteve]

Ah. I'd think that's a common request, and that nearly all libs implement it?

• Flowbite-svelte: https://flowbite-svelte.com/docs/forms/input-field#Input_sizes
• Preline UI: https://preline.co/docs/input.html (
• DaisyUI: https://daisyui.com/components/input/ (input-sm, input-md, input-lg, etc.)

[endigo9740]

Yeah, they're they're using canned sizes. In v3 we're going to introduce a global scaling system that will affect a whole host of sizes in a very uniform fashion.

https://next.skeleton.dev/design/spacing

I'm currently working on the new theme generator, once this is completed we'll have a examples showing how this works. I'd recommend check that out.

Again it's not canned sizes like you might be expecting, but it's another way to solve the same issue. Definitely keep an eye out for that.

[howesteve]

Ah, I got your point now. I had not seen that link before. That's a very nice feature you're implementing. It will be much easier to build canned sizes over it. Actually, I think "canned sizes" are not so bad - better than just one size, for sure.
The new system actually reminds me the Skeleton's colors system, which is "adaptable". I'll indeed keep an eye on that.

Thanks for all the replies.