Closed epitomus closed 9 years ago
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
Ah ok, I am trying to use <form class="form-horizontal">, which does not work in jsonform / bootstrap3.
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
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.
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.
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.
ok, tell me your test result.
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>';
};
if you want change description position, then you have to override the fieldTemplate by supply your one by:
JSONForm.fieldTemplate = ......
Ok, perfect. Still a few strange layout things, just need to tweak the classes.
Closing this issue, thanks again!
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.