Support for layout grid

[Richard Roncancio]

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.

[Nicolas Perriault]

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.

[Nicolas Perriault]

I'm closing this. Feel free to reopen if you plan to work on this specific feature.

[Richard Roncancio]

@n1k0 i think i'm going to work on this because i need it for a project, any sugestions on how to tackle this.

[Pablo Enrici]

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.