How to customize uniforms-material based forms

react
1

I have a basic web form setup using a combination of simpl-schema (1.4.2), uniforms (1.25.0), and material-ui (1.5.0). The auto form generation and validation is completely functional - no complaints there! However, despite using standard material-ui components, the form does not look professional at all.

I tried following the Uniforms documentation on customizing form elements, but keep running into integration issues. In many cases styles not getting passed to child elements correctly, and dynamic form field components (from subschema) require custom wrappers to customize. In short, I have to resort to hackish behaviors to customize the style of uniforms-material fields.

Auto forms are great for the prototyping phase, but to make things look professional I need manual control of field components. How would I accomplish this? Should I drop Uniforms entirely and write my own components that support simple-schema generation and validation? Should I fork uniforms-material and customize that way? What’s the community consensus on creating custom styled forms?

1 Like
2

I did not like semantic or material versions of uniforms, so I used unstyled. I am using the materialize Meteor component and so I get some basic material styling anyway, but I agree with you that it handles many things poorly. Fonts are problematically small, spacing often is inefficiant, arrays are no fun at all since they like to stack right on the left of the form below the label, as do radio buttons. Lots of pain.

So I tortured myself for a week or two slowly figuring out how to style the forms and have been able to completely change how they look. The basics come down to CSS I’m afraid … lots of “inspect” followed by css updates, but I can say that you can get at anything pretty much.

I use Autoform exclusively as I am doing a time boxed project that should have quite a few people on it (what’s new?) … and I use it with the simpl-schema npm module. The main trick is to use the uniforms object as part of your field definition when you want to take more control … an example:

        uniforms: {
            disabled: true,
            id: "inlinearray",
        },

Disabling a field makes it read only, obviously, and I do this whenever I want auto form to display useful info. In this case, though, it is a set of tags that I am showing. The tag itself is a react component that I have styled to look like a real tag, with rounded ends and a little round x button on the left to remove the tag. Works great. But in this place, I do not want the tag to be editable, as trhat is handled in another way. So disabled. I hated the way arrays were displayed (block), so I found a really neat trick to have tags display inline and wrap so you can add as many as you need. I use the id field, which is the only one I can find that shows up in the actual HTML, allowing it to be addressed in css. Basically, it is the poor man’s class. So unfortunate that uniforms does not seem to allow for much more flexible styling. No doubt that’s what they include every style under the sun as separate packages.

The css I use for this “inlinearray” id is:

form > ul[id=inlinearray] {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

form > ul[id=inlinearray] > label, form > ul[id=inlinearray] > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

This looks pretty good. Of course, I have similar css for blockarray when I want to have an array of sub objects properly indented and separated with a subtle background color to separate them from the main elements. I also shrink the labels in sub forms and so on.

It can be done, but it is harder than it should be. Alas, every package has its compromises. Best of luck.

1 Like
3

Ah yes! Build styling up from uniforms-unstyled rather than fight with existing styling. I’ll agree that using id as a poor man’s class is not ideal, but it does sidestep the whole problem of trying to pass styles as props in forms with multiple levels of data. Your example is helpful for me too, as I am going to add tagging in a future update and it will need forms and styling of course.

I’ve been stuck on this for weeks wading through the sources of uniforms and uniforms-material-ui, and this is exactly what I needed to hear! Thanks kletkeman! If I ever run into you at a conference I owe you a beer!

2 Likes