Add support for bootstrap3

[epitomus]

Bootstrap version is up to 3.3.5, but the generated forms only work with the bundled (deps) version of bootstrap (2.2.1). I've started to have a look at porting it across as I thought it would simply require updating the class names. After looking at it for a little while, it's apparent it will require some structural changes to the templates, so will be a breaking change.

[ulion]

my repo did support bootstrap 3, check the bootstrap3 playground: http://ulion.github.io/jsonform/playground/bootstrap3/

2015-07-23 12:09 GMT+08:00 epitomus notifications@github.com:

Bootstrap version is up to 3.3.5, but the generated forms only work with the bundled (deps) version of bootstrap (2.2.1). I've started to have a look at porting it across as I thought it would simply require updating the class names. After looking at it for a little while, it's apparent it will require some structural changes to the templates, so will be a breaking change.

— Reply to this email directly or view it on GitHub https://github.com/ulion/jsonform/issues/16.

Ulion

[epitomus]

Ah ok, I am trying to use <form class="form-horizontal">, which does not work in jsonform / bootstrap3.

[ulion]

No idea. this playground is using bootstrap3, what exactly not works?

http://ulion.github.io/jsonform/playground/bootstrap3/

2015-07-23 12:19 GMT+08:00 epitomus notifications@github.com:

Ah ok, I am trying to use , which does not work in jsonform / bootstrap3.

— Reply to this email directly or view it on GitHub https://github.com/ulion/jsonform/issues/16#issuecomment-123958831.

Ulion

[epitomus]

Using bootstrap 2, you could add a class="form-horizontal" to a jsonform generated form and it would align the fields horizontally next to the labels. In bootstrap 3, this no longer works with the generated form. E.g. Horizontal Form.

[ulion]

Ok, now what you mean, just added a commit.

Now you can try in the form definition override the defaultClasses with:

{
  schema: ...
  form: ...
  defaultClasses: {
    labelClass: 'control-label col-sm-2',
    controlClass: 'controls col-sm-10'
  }
}

the button region may be need different class, you can try to figure it out.

Or, use script to add those required classes later after the form generated.

[epitomus]

Cool, thanks! Getting closer, but it's still not ideal, the help text (if present) is next to the field name, and that pushes the input field down. It's probably just a case of getting the classes right, I'll keep playing.

[ulion]

ok, tell me your test result.

[epitomus]

Hmm seems like an ordering thing. If I force the <span> with the field description to be after the input field it shows in the correct location. For example it works fine if I move the following block:

      '<% if (node.description) { %>' +
      '<span class="help-block jsonform-description"><%= node.description %></span>' +
      '<% } %>' +

to straight after inner +, e.g. now looks like:

// Twitter bootstrap-friendly HTML boilerplate for standard inputs
jsonform.fieldTemplate = function(inner) {
  return '<div class="<%= cls.groupClass %> jsonform-node jsonform-error-<%= keydash %>' +
    '<%= elt.htmlClass ? " " + elt.htmlClass : "" %>' +
    '<%= (node.required && node.formElement && (node.formElement.type !== "checkbox") ? " jsonform-required" : "") %>' +
    '<%= (node.isReadOnly() ? " jsonform-readonly" : "") %>' +
    '<%= (node.disabled ? " jsonform-disabled" : "") %>' +
    '" data-jsonform-type="<%= node.formElement.type %>">' +
    '<% if (node.title && !elt.notitle && elt.inlinetitle !== true) { %>' +
      '<label class="<%= cls.labelClass %>" for="<%= node.id %>"><%= node.title %></label>' +
    '<% } %>' +
    '<div class="<%= cls.controlClass %>">' +
      '<% if (node.prepend || node.append) { %>' +
        '<div class="<%= node.prepend ? cls.prependClass : "" %> ' +
        '<%= node.append ? cls.appendClass : "" %>">' +
        '<% if (node.prepend && node.prepend.indexOf("<button ") >= 0) { %>' +
          '<% if (cls.buttonAddonClass) { %>' +
            '<span class="<%= cls.buttonAddonClass %>"><%= node.prepend %></span>' +
          '<% } else { %>' +
            '<%= node.prepend %>' +
          '<% } %>' +
        '<% } %>' +
        '<% if (node.prepend && node.prepend.indexOf("<button ") < 0) { %>' +
          '<span class="<%= cls.addonClass %>"><%= node.prepend %></span>' +
        '<% } %>' +
      '<% } %>' +
      inner +
      '<% if (node.description) { %>' +
      '<span class="help-block jsonform-description"><%= node.description %></span>' +
      '<% } %>' +
      '<% if (node.append && node.append.indexOf("<button ") >= 0) { %>' +
        '<% if (cls.buttonAddonClass) { %>' +
          '<span class="<%= cls.buttonAddonClass %>"><%= node.append %></span>' +
        '<% } else { %>' +
          '<%= node.append %>' +
        '<% } %>' +
      '<% } %>' +
      '<% if (node.append && node.append.indexOf("<button ") < 0) { %>' +
        '<span class="<%= cls.addonClass %>"><%= node.append %></span>' +
      '<% } %>' +
      '<% if (node.prepend || node.append) { %>' +
        '</div>' +
      '<% } %>' +
      '<span class="help-block jsonform-errortext" style="display:none;"></span>' +
    '</div></div>';
};

[ulion]

if you want change description position, then you have to override the fieldTemplate by supply your one by:

JSONForm.fieldTemplate = ......

[epitomus]

Ok, perfect. Still a few strange layout things, just need to tweak the classes.

Closing this issue, thanks again!