search

json-schema-form / angular-schema-form

Generate forms from a JSON schema, with AngularJS!
https://json-schema-form.github.io/angular-schema-form
MIT License
2.47k stars 653 forks source link

[Question] How to customize the checkboxes display for a long list? #862

Closed iGormilhit closed 7 years ago

iGormilhit commented 7 years ago

Disclaimer

I'm not a developer and english isn't my primary language. :smiley:

Question

In the form I'm trying to write, thanks to jsonschema and AFS, I have a property that can take multiple value inside a closed list.

I tried to make and array to give the possibility to add a new field, but AFAIK, I cannot put an enum in this kind of array (as in the array bootstrap-example). And if it would be possible, it wouldn't be very usable.

So I now think that a better solution is to use the array that display as checkboxes. But my enum is quite big. So I wonder, if there's a way to customize the display, like the bootstrap-grid example. I tried to, I even read the bootstrap documentation, but I must miss something.

Maybe the correct solution is to do it directly with the template/theme/css of the application in which this form wil be displayed.

Demo/Gist

The long checkboxes list -- gist

My unsuccessful attempt to 'grid' it -- gist. I also tried with the "htmlClass": "checkbox-inline" without more success.

@json-schema-form/angular-schema-form-lead

Anthropic commented 7 years ago

@iGormilhit you are correct the easiest way is to apply css

.checkbox { display: inline-block; float: left; width: 50%; }

If this affects other checkboxes, you can apply a class to a section and then use

.sectionClass .checkbox { display: inline-block; float: left; width: 50%; }

The new alpha release has better classes so you can specify a class only used by that field.

Please re-open if you do not feel the question has been answered sufficiently.