Vue-form-generator: Checkbox value display
The checkbox example does not have a value, just a label. Since the label appears above the checkbox, the check has no context to meaning. Is it possible to add styling to the box as well as a text defining its purpose vs a label?
DelfsEngineering
All 11 comments
What do you want exactly? Please explain.
icebob
on 9 Oct 2017
The initial post has a screen of the how the checkbox sits below the label. This is bad UI, what do you recommend?
I think the checkbox should be to the left of the label.
DelfsEngineering
on 10 Oct 2017
I agree with DelfsEngineering, I think the checkbox should be rendered something like
<label><input type="checkbox" /> Label Text</label>
Due to how formGenerator.vue is controlling the layout, instead of the field component, this doesn't seem possible at the moment.
I'd recommend changing formGenerator.vue and just having it load the field component, allowing the field component the ability to manage it's own layout. This would allow for more advanced custom component as well.
Replacing the below
.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
| {{ field.label }}
span.help(v-if='field.help')
i.icon
.helpText(v-html='field.help')
.field-wrap
component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :formOptions='options', @model-updated='modelUpdated', @validated="onFieldValidated")
.buttons(v-if='buttonVisibility(field)')
button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field, $event)', :class='btn.classes') {{ btn.label }}
.hint(v-if='field.hint') {{ fieldHint(field) }}
.errors.help-block(v-if='fieldErrors(field).length > 0')
span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}
With
.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :formOptions='options', @model-updated='modelUpdated', @validated="onFieldValidated")
Then updating the field component templates ..
<template lang="pug">
label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
| {{ field.label }}
span.help(v-if='field.help')
i.icon
.helpText(v-html='field.help')
.field-wrap
input(:id="getFieldID(schema)", type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :class="schema.fieldClasses")
.buttons(v-if='buttonVisibility(field)')
button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field, $event)', :class='btn.classes') {{ btn.label }}
.hint(v-if='field.hint') {{ fieldHint(field) }}
.errors.help-block(v-if='fieldErrors(field).length > 0')
span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}
</template>
This would then allow the checkbox, radios, and other custom component the ability to control their layout within the form-group.
Due to the amount of repeated template logic using this new structure, it may make more sense to switch over to a component render function that can build out the "standard" layout while allowing the individual field components to override it and change the layout.
zoul0813
on 9 Nov 2017
Yes, but it is a very breaking change. So for this we need to rewrite the whole component and implement also a lot of other features from issues. It is a big work and currently I'm busy so I can't do it.
icebob
on 9 Nov 2017
Very breaking indeed, it will break all the custom components. Perhaps an alternate solution that is reverse compatible or what I have done, make custom components that are similar to ones that need reworking.
DelfsEngineering
on 9 Nov 2017
Does anyone have a good workaround for it in the meantime? I'm interested in seeing what can be done.
jaywilburn
on 2 Jan 2018
@jaywilburn - implement your own component, that鈥檚 what I did. Extend AbstractField and unset the label so it doesn鈥檛 appear above the check, then use a custom template to wrap the input and put your label in the right place. V3 should have a good solution for this, FYI.
zoul0813
on 2 Jan 2018
@zoul0813 Can you please share a gist with me of your extension of AbstractField and/or custom template you used? I want to make sure it won't break anything we've already built.
jaywilburn
on 5 Jan 2018
@jaywilburn here's my custom checkbox.vue component. I'm using Vue's "render" method here, instead of a but the concept is the same. Here, I'm just using "labelText" property in the field schema instead of "label".
The rendered output looks something like this:
<div class="form-group">
<div class="field-wrap">
<div class="wrapper">
<label>
<input ... />
{{ labelText }}
</label>
</div>
</div>
</div>
```
```
zoul0813
on 8 Jan 2018
@zoul0813 Thanks so much! I will present this to my team to make these same changes.
jaywilburn
on 8 Jan 2018
You could also use CSS and flex with order property
.form-group.field-checkbox {
display: flex;
flex-wrap: wrap;
label {
order: 1;
padding-left: 10px;
}
}
lionel-bijaoui
on 28 Jun 2018
Related issues
zwx00
路
3Comments
DelfsEngineering
路
4Comments
miseeger
路
4Comments
Atiladanvi
路
4Comments
afourmeaux
路
4Comments
Most helpful comment
@jaywilburn here's my custom checkbox.vue component. I'm using Vue's "render" method here, instead of a but the concept is the same. Here, I'm just using "labelText" property in the field schema instead of "label".
The rendered output looks something like this:
```
```