Support for layout grid
batusai513 opened this issue · comments
Description
Hi, I wanted to know if there is a way to add grid support like in bootstrap where you can do the following:
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control">
</div>
<div class="col-xs-3">
<input type="text" class="form-control">
</div>
<div class="col-xs-4">
<input type="text" class="form-control">
</div>
</div>
This would be awesome for bigger forms.
Thanks.
We have no support for templates atm, but this may be added in the future. Feel free to send a PR if you're willing to work on this.
I'm closing this. Feel free to reopen if you plan to work on this specific feature.
@n1k0 i think i'm going to work on this because i need it for a project, any sugestions on how to tackle this.
I would really love support for something like that. At the moment you can achieve that kind of layout by means of Bootstrap classes in your uiSchema. Something like this:
const schema = {
type: 'object',
properties: {
foo: { type: 'string' }
bar: { type: 'string' }
baz: { type: 'string' }
}
};
const uiSchema = {
classNames: 'row',
foo: { classNames: 'col-xs-2' }
bar: { classNames: 'col-xs-3' }
baz: { classNames: 'col-xs-4' }
};
But this technique forces you to adapt your schema, nesting fields inside objects just for styling purposes, which I think is not cool.
You just need to wrap specific fields in .row
elements, but I really can't imagine how something like this could be done in an elegant way.