Input's with horizontal-form class

[kyse]

Can't set input widths using the grid classes per bootstrap documentation when using the horizontal-form class. As form-control class sets width to 100%, this overrides any grid class widths. Bootstrap documentation shows the need to wrap the input in a div. That way we can leave form-control at 100%. And I guess(?) allow a form def option to specify the class for this div, ie col-md-6. Can't set width to auto as that just brings up the need to reinvent the grid classes to apply to the input otherwise.

[Anthropic]

Hi @kyse htmlClass should apply to the container div and fieldHtmlClass should be added to the input itself, unfortunately as I don't use bootstrap myself I need your help with understanding what else needs to change in the generated html if you have time to show me please?

[kyse]

Add col-md-12 to a field class of a text box. Add a horizontal-form class to the form element. Your goal is to display the label and field inline. The purpose of using col-md-12 is to control the width of the field element. You'll notice the sizing doesn't work properly. The field element needs to be wrapped in a Div that has the col-md-12 class instead. Since the text input elements width is set to 100% the idea is to have it 100% of the containing element width which is set by the bootstrap grid classes.

[slyadams]

@kyse, out of interest, have you even managed to get:

<form class="form-horizontal" sf-schema=".....>

Working at all?

[kyse]

Yep, basically overwrote their templates in the bootstrap decorator to wrap input elements with div's containing a horizontalClass form binding.

[slyadams]

Is there value in doing a PR for that? Does it break anything if you don't do horizontal forms?

[rapkyt]

I have the same problem.

Yep, basically overwrote their templates in the bootstrap decorator to wrap input elements with div's containing a horizontalClass form binding.

How did you do to overwrite their templates? I've tried with no luck

I never overwrited a template in Angularjs

[kyse]

I basically created a file to overwrite the templateCache.

// Since stock bootstrap-decorator doesn't support bootstrap grid classses, we override the templates here as needed to add the horizontalHtmlClass expression to the needed div's class.

(function () {
    'use strict';

    angular
        .module('my.module')
        .run(setupFormTemplateCache);

    setupFormTemplateCache.$inject = ["$templateCache"];

    // Before uncommenting another template, ensure you wrap the field div with a div of class="{{form.horizontalHtmlClass}}".
    // This isn't necessesarily requred for all types, but needed to control the width size of the input field since control-form class automataically sets 100% width overwriting any col-size-# bootstrap classes.
    function setupFormTemplateCache($templateCache) {
        //$templateCache.put("decorators/bootstrap/actions-trcl.html", "<div class=\"btn-group schema-form-actions {{form.htmlClass}}\" ng-transclude=\"\"></div>");
        //$templateCache.put("decorators/bootstrap/actions.html", "<div class=\"btn-group schema-form-actions {{form.htmlClass}}\"><input ng-repeat-start=\"item in form.items\" type=\"submit\" class=\"btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}\" value=\"{{item.title}}\" ng-if=\"item.type === \'submit\'\"> <button ng-repeat-end=\"\" class=\"btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}\" type=\"button\" ng-disabled=\"form.readonly\" ng-if=\"item.type !== \'submit\'\" ng-click=\"buttonClick($event,item)\"><span ng-if=\"item.icon\" class=\"{{item.icon}}\"></span>{{item.title}}</button></div>");
        //$templateCache.put("decorators/bootstrap/array.html", "<div class=\"schema-form-array {{form.htmlClass}}\" sf-field-model=\"sf-new-array\" sf-new-array=\"\"><label class=\"control-label\" ng-show=\"showTitle()\">{{ form.title }}</label><ol class=\"list-group\" sf-field-model=\"\" ui-sortable=\"form.sortOptions\"><li class=\"list-group-item {{form.fieldHtmlClass}}\" schema-form-array-items=\"\" sf-field-model=\"ng-repeat\" ng-repeat=\"item in $$value$$ track by $index\"><button ng-hide=\"form.readonly || form.remove === null\" ng-click=\"deleteFromArray($index)\" ng-disabled=\"form.schema.minItems >= modelArray.length\" style=\"position: relative; z-index: 20;\" type=\"button\" class=\"close pull-right\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button></li></ol><div class=\"clearfix\" style=\"padding: 15px;\" ng-model=\"modelArray\" schema-validate=\"form\"><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div><button ng-hide=\"form.readonly || form.add === null\" ng-click=\"appendToArray()\" ng-disabled=\"form.schema.maxItems <= modelArray.length\" type=\"button\" class=\"btn {{ form.style.add || \'btn-default\' }} pull-right\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</button></div></div>");
        //$templateCache.put("decorators/bootstrap/checkboxes.html", "<div sf-field-model=\"sf-new-array\" sf-new-array=\"\" class=\"form-group schema-form-checkboxes {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"control-label {{form.labelHtmlClass}}\" sf-field-model=\"\" schema-validate=\"form\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"checkbox\" ng-repeat=\"val in titleMapValues track by $index\"><label><input type=\"checkbox\" ng-disabled=\"form.readonly\" sf-changed=\"form\" class=\"{{form.fieldHtmlClass}}\" ng-model=\"titleMapValues[$index]\" name=\"{{form.key.slice(-1)[0]}}\"> <span ng-bind-html=\"form.titleMap[$index].name\"></span></label></div><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
        //$templateCache.put("decorators/bootstrap/fieldset.html", "<fieldset ng-disabled=\"form.readonly\" class=\"schema-form-fieldset {{form.htmlClass}}\"><legend ng-class=\"{\'sr-only\': !showTitle() }\">{{ form.title }}</legend><div class=\"help-block\" ng-show=\"form.description\" ng-bind-html=\"form.description\"></div></fieldset>");
        //$templateCache.put("decorators/bootstrap/help.html", "<div class=\"helpvalue schema-form-helpvalue {{form.htmlClass}}\" ng-bind-html=\"form.helpvalue\"></div>");
        //$templateCache.put("decorators/bootstrap/radio-buttons.html", "<div class=\"form-group schema-form-radiobuttons {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><div><label class=\"control-label {{form.labelHtmlClass}}\" ng-show=\"showTitle()\">{{form.title}}</label></div><div class=\"btn-group\"><label sf-field-model=\"replaceAll\" class=\"btn {{ (item.value === $$value$$) ? form.style.selected || \'btn-default\' : form.style.unselected || \'btn-default\'; }}\" ng-class=\"{ active: item.value === $$value$$ }\" ng-repeat=\"item in form.titleMap\"><input type=\"radio\" class=\"{{form.fieldHtmlClass}}\" sf-changed=\"form\" style=\"display: none;\" ng-disabled=\"form.readonly\" sf-field-model=\"\" schema-validate=\"form\" ng-value=\"item.value\" name=\"{{form.key.join(\'.\')}}\"> <span ng-bind-html=\"item.name\"></span></label></div><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
        //$templateCache.put("decorators/bootstrap/radios.html", "<div class=\"form-group schema-form-radios {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"control-label {{form.labelHtmlClass}}\" sf-field-model=\"\" schema-validate=\"form\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"radio\" ng-repeat=\"item in form.titleMap\"><label><input type=\"radio\" class=\"{{form.fieldHtmlClass}}\" sf-changed=\"form\" ng-disabled=\"form.readonly\" sf-field-model=\"\" ng-value=\"item.value\" name=\"{{form.key.join(\'.\')}}\"> <span ng-bind-html=\"item.name\"></span></label></div><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
        //$templateCache.put("decorators/bootstrap/section.html", "<div class=\"schema-form-section {{form.htmlClass}}\"></div>");
        //$templateCache.put("decorators/bootstrap/submit.html", "<div class=\"form-group schema-form-submit {{form.htmlClass}}\"><input type=\"submit\" class=\"btn {{ form.style || \'btn-primary\' }} {{form.fieldHtmlClass}}\" value=\"{{form.title}}\" ng-disabled=\"form.readonly\" ng-if=\"form.type === \'submit\'\"> <button class=\"btn {{ form.style || \'btn-default\' }}\" type=\"button\" ng-click=\"buttonClick($event,form)\" ng-disabled=\"form.readonly\" ng-if=\"form.type !== \'submit\'\"><span ng-if=\"form.icon\" class=\"{{form.icon}}\"></span> {{form.title}}</button></div>");
        //$templateCache.put("decorators/bootstrap/tabarray.html", "<div ng-init=\"selected = { tab: 0 }\" ng-model=\"modelArray\" schema-validate=\"form\" sf-field-model=\"sf-new-array\" sf-new-array=\"\" class=\"clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || \'left\'}} {{form.htmlClass}}\"><div ng-if=\"!form.tabType || form.tabType !== \'right\'\" ng-class=\"{\'col-xs-3\': !form.tabType || form.tabType === \'left\'}\"><ul class=\"nav nav-tabs\" ng-class=\"{ \'tabs-left\': !form.tabType || form.tabType === \'left\'}\"><li sf-field-model=\"ng-repeat\" ng-repeat=\"item in $$value$$ track by $index\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a></li><li ng-hide=\"form.readonly\" ng-disabled=\"form.schema.maxItems <= modelArray.length\" ng-click=\"$event.preventDefault() || (selected.tab = appendToArray().length - 1)\"><a href=\"#\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</a></li></ul></div><div ng-class=\"{\'col-xs-9\': !form.tabType || form.tabType === \'left\' || form.tabType === \'right\'}\"><div class=\"tab-content {{form.fieldHtmlClass}}\"><div class=\"tab-pane clearfix tab{{selected.tab}} index{{$index}}\" sf-field-model=\"ng-repeat\" ng-repeat=\"item in $$value$$ track by $index\" ng-show=\"selected.tab === $index\" ng-class=\"{active: selected.tab === $index}\"><div schema-form-array-items=\"\"></div><button ng-hide=\"form.readonly\" ng-click=\"selected.tab = deleteFromArray($index).length - 1\" ng-disabled=\"form.schema.minItems >= modelArray.length\" type=\"button\" class=\"btn {{ form.style.remove || \'btn-default\' }} pull-right\"><i class=\"glyphicon glyphicon-trash\"></i> {{ form.remove || \'Remove\'}}</button></div><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div></div></div></div><div ng-if=\"form.tabType === \'right\'\" class=\"col-xs-3\"><ul class=\"nav nav-tabs tabs-right\"><li sf-field-model=\"ng-repeat\" ng-repeat=\"item in $$value$$ track by $index\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a></li><li ng-hide=\"form.readonly\" ng-disabled=\"form.schema.maxItems <= modelArray.length\" ng-click=\"$event.preventDefault() || (selected.tab = appendToArray().length - 1)\"><a href=\"#\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</a></li></ul></div>");
        //$templateCache.put("decorators/bootstrap/tabs.html", "<div ng-init=\"selected = { tab: 0 }\" class=\"schema-form-tabs {{form.htmlClass}}\"><ul class=\"nav nav-tabs\"><li ng-repeat=\"tab in form.tabs\" ng-disabled=\"form.readonly\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{ tab.title }}</a></li></ul><div class=\"tab-content {{form.fieldHtmlClass}}\"></div></div>");
        $templateCache.put("decorators/bootstrap/checkbox.html", "<div class=\"checkbox schema-form-checkbox {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"{{form.labelHtmlClass}}\" ng-class=\"{\'required-field-label\': form.required === true}\"><input type=\"checkbox\" sf-changed=\"form\" ng-disabled=\"form.readonly\" sf-field-model=\"\" schema-validate=\"form\" class=\"{{form.fieldHtmlClass}}\" name=\"{{form.key.slice(-1)[0]}}\" id=\"{{form.key.slice(-1)[0]}}\"> <span ng-bind-html=\"form.title\"></span></label><div class=\"help-block\" sf-message=\"form.description\"></div></div></div>");
        $templateCache.put("decorators/bootstrap/radios-inline.html", "<div class=\"form-group schema-form-radios-inline {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-class=\"{\'required-field-label\': form.required === true}\" ng-show=\"showTitle()\" sf-field-model=\"\" schema-validate=\"form\">{{form.title}}</label><div class=\"{{form.horizontalHtmlClass}}\"><label class=\"radio-inline {{form.fieldHtmlClass}}\" ng-repeat=\"item in form.titleMap\"><input type=\"radio\" sf-changed=\"form\" ng-disabled=\"form.readonly\" sf-field-model=\"\" ng-value=\"item.value\" name=\"{{form.key.join(\'.\')}}\"><span ng-bind-html=\"item.name || '&nbsp;'\">&nbsp;</span></label><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
        $templateCache.put("decorators/bootstrap/select.html", "<div class=\"form-group {{form.htmlClass}} schema-form-select\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess(), \'has-feedback\': form.feedback !== false}\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-class=\"{\'required-field-label\': form.required === true}\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"{{form.horizontalHtmlClass}}\"><select sf-field-model=\"\" ng-disabled=\"form.readonly\" sf-changed=\"form\" class=\"form-control {{form.fieldHtmlClass}}\" schema-validate=\"form\" ng-options=\"item.value as item.name group by item.group for item in form.titleMap\" name=\"{{form.key.slice(-1)[0]}}\"></select><div class=\"help-block\" sf-message=\"form.description\"></div></div></div>");
        $templateCache.put("decorators/bootstrap/textarea.html", "<div class=\"form-group has-feedback {{form.htmlClass}} schema-form-textarea\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-class=\"{\'sr-only\': !showTitle(), \'required-field-label\': form.required === true}\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label> <div class=\"{{form.horizontalHtmlClass}}\"><textarea ng-if=\"!form.fieldAddonLeft && !form.fieldAddonRight\" class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" sf-changed=\"form\" ng-attr-placeholder=\"{{form.placeholder}}\" ng-disabled=\"form.readonly\" sf-field-model=\"\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\"></textarea><div ng-if=\"form.fieldAddonLeft || form.fieldAddonRight\" ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\"><span ng-if=\"form.fieldAddonLeft\" class=\"input-group-addon\" ng-bind-html=\"form.fieldAddonLeft\"></span> <textarea class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" sf-changed=\"form\" ng-attr-placeholder=\"{{form.placeholder}}\" ng-disabled=\"form.readonly\" sf-field-model=\"\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\"></textarea> <span ng-if=\"form.fieldAddonRight\" class=\"input-group-addon\" ng-bind-html=\"form.fieldAddonRight\"></span></div><span class=\"help-block\" sf-message=\"form.description\"></span></div></div>");
        $templateCache.put("decorators/bootstrap/default.html", "<div class=\"form-group schema-form-{{form.type}} {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess(), \'has-feedback\': form.feedback !== false }\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-class=\"{\'sr-only\': !showTitle(), \'required-field-label\': form.required === true}\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><div class=\"{{form.horizontalHtmlClass}}\"><input ng-if=\"!form.fieldAddonLeft && !form.fieldAddonRight\" ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" sf-field-model=\"\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\"><div ng-if=\"form.fieldAddonLeft || form.fieldAddonRight\" ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\"><span ng-if=\"form.fieldAddonLeft\" class=\"input-group-addon\" ng-bind-html=\"form.fieldAddonLeft\"></span> <input ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" sf-field-model=\"\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\"> <span ng-if=\"form.fieldAddonRight\" class=\"input-group-addon\" ng-bind-html=\"form.fieldAddonRight\"></span></div><div class=\"help-block\" sf-message=\"form.description\"></div><span ng-if=\"form.feedback !== false\" class=\"form-control-feedback\" ng-class=\"evalInScope(form.feedback) || {\'glyphicon\': true, \'glyphicon-ok\': hasSuccess(), \'glyphicon-remove\': hasError() }\" aria-hidden=\"true\"></span> <span ng-if=\"hasError() || hasSuccess()\" id=\"{{form.key.slice(-1)[0] + \'Status\'}}\" class=\"sr-only\">{{ hasSuccess() ? \'(success)\' : \'(error)\' }}</span></div></div>");
    }
})();

[rapkyt]

It worked properly

Thanks!

[dorinniscu]

It will be merged? It would be nice so we don't have to maintain an extra file. The bootstrap input really needs an wrapper no matter if we'll use it for horizontal alignment or will be an empty div.

[chakraborty-slx]

@kyse Could you please take a look into this plunk, I am not able to apply the solution provided by you. https://plnkr.co/edit/68TLAD

[clmntr]

Hi,

What you can do is basically add your own template to the bootstrap decorator like described here.

For my problem, my solution was to add a new radios-multiple-inline (sounds weird, I don't assume that...) to the decorator, wrapping each radios labelled inside a div and adding a "wrapperHtmlClass" property to the previous radios-inline in order to manipulate each radios :

angular
    .module('schemaForm')
    .config(addTemplates)
    .run(setupFormTemplateCache);

setupFormTemplateCache.$inject = ["$templateCache"];

// shared properties
var base = "directives/decorators/bootstrap/"

// Add custom templates to the template Cache
function setupFormTemplateCache ( $templateCache ) {
    $templateCache.put( 
        base + "radios-multiple-inline.html",
        "<div class=\"form-group schema-form-radios-inline {{::form.htmlClass + \' \' + idClass}}\" ng-class=\"{ \'has-error\': form.disableErrorState !== true &&  hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess(), \'required\': form.required === true }\"> <label class=\"control-label {{::form.labelHtmlClass}}\" ng-show=\"showTitle()\" sf-field-model schema-validate=\"form\" >{{form.title}}</label> <div class=\"{{form.wrapperHtmlClass}}\" ng-repeat=\"tm in form.titleMap\" ng-class=\"form.titleMap[$index].wrapperHtmlClass\"> <label class=\"radio-inline\" > <input type=\"radio\" class=\"{{::form.fieldHtmlClass}}\" sf-changed=\"form\" ng-disabled=\"form.readonly\" sf-field-model ng-value=\"tm.value\" name=\"{{::fieldId(true, false)}}\"> <span ng-bind-html=\"tm.name\"></span> </label> </div> <div class=\"help-block\" sf-message=\"form.description\"></div></div>"
    );
}

function addTemplates ( schemaFormDecoratorsProvider, sfBuilderProvider ) {

    schemaFormDecoratorsProvider.defineAddOn(
        'bootstrapDecorator',                   // Name of the decorator you want to add to.
        'radios-multiple-inline',               // Form type that should render this add-on
        base + 'radios-multiple-inline.html',   // Template name in $templateCache
        sfBuilderProvider.stdBuilders           // List of builder functions to apply.
    );
}

The result is like that :

<div class="form-group schema-form-radios-inline {{::form.htmlClass + ' ' + idClass}}"
     ng-class="{
       'has-error': form.disableErrorState !== true &&  hasError(),
       'has-success': form.disableSuccessState !== true && hasSuccess(),
       'required': form.required === true
     }">
  <label class="control-label {{::form.labelHtmlClass}}"
        ng-show="showTitle()" sf-field-model
        schema-validate="form" >{{form.title}}</label>
  <div class="{{form.wrapperHtmlClass}}" ng-repeat="tm in form.titleMap" ng-class="form.titleMap[$index].wrapperHtmlClass">
      <label class="radio-inline" >
      <input type="radio"
             class="{{::form.fieldHtmlClass}}"
             sf-changed="form"
             ng-disabled="form.readonly"
             sf-field-model
             ng-value="tm.value"
             name="{{::fieldId(true, false)}}">
      <span ng-bind-html="tm.name"></span>
    </label>
  </div>
  <div class="help-block" sf-message="form.description"></div>
</div>

And called like that :

{
    "key"               : "identity",
    "type"              : "radios-multiple-inline",
    "labelHtmlClass"    : "col-xs-2",
    "htmlClass"         : "row",
    "wrapperHtmlClass"  : "col-xs-5",
    "titleMap"  : [
        {
            "value" : "John",
            "name"  : "John"
        },
        {
            "value" : "Mike",
            "name"  : "Mike"
        }
    ]
}

Or even like that :

{
   "key"               : "identity",
   "type"              : "radios-multiple-inline",
   "labelHtmlClass"    : "col-xs-5",
   "htmlClass"         : "row",
   "titleMap"  : [
       {
           "value" : "John",
           "name"  : "John",
           "wrapperHtmlClass"  : "col-xs-3"
       },
       {
           "value" : "Mike",
           "name"  : "Mike",
           "wrapperHtmlClass"  : "col-xs-4"
       }
   ]
}

Hope it helps.

EDIT:

• Use last version of the radio-inline as a base
• Add the support of the items' wrapperHtmlClass property