Input group like Bootstrap

[haizad]

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...
  • [ ] bug report
  • [x] feature request
  • [ ] support request => Please do not submit support request here, see note at the top of this template.

Thanks for making this wonderful project. I just to inform that it would be great if you can include input group feature like Bootstrap into Vue-form-generator.

I am trying to make one, but it does not work as intended. My code :

//main.js
Vue.component('field-vfg-page-name', VfgPageName)

//Sample.vue
{
   type: "vfg-page-name",
   model: "name",
   placeholder: "Enter name",
   styleClasses: "col-md-6"
},

//VfgPageName.vue
<template>
<div class="input-group mb-12">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

</template>

<style>
.input-group {
  display: inline;
}
</style>
<script>
import { abstractField } from 'vue-form-generator'
export default {
  mixins: [abstractField],

Output :

I am not sure why the bootstrap input group was not inline. But that's not the case. It would be great if someone can built in the feature into vue file generator.

[PavelTytyuk]

This is happening due to custom .form-control class definition:

.vue-form-generator .form-control:not([class*=" col-"]) {
    width: 100%;
}

Use own css as they recommend in https://vue-generators.gitbook.io/vue-generators/usage/styling and remove definition