Multiple columns per row

[ravivit9]

Hi,

Thanks for the great work. Currently I am using a-s-f in my project where I have number of complex forms with number of input fields, since the current implementation displays individual fields in separate row is there a way to display more than one field in the same row for example field1 and field2 in the same row instead of separate rows?

Can this be configured from $scope.form itself as a configuration parameter e.g. In Bootstrap terms field1 with col-4 and field2 with col-6.

Regards,
Ravindra.

[Dervisevic]

I'm on my phone so I'll keep it short. You can set html classes via the form, check the documentation for htmlclass and fieldhtmlclass. Another option that may be needed is splitting up the form section for several instances of Asf, all of them using the same schema and model but smaller form specifications that display the forms for that column or whatever you choose.

Hope that helps.

On Tue, Mar 24, 2015 at 4:29 PM, ravivit9 notifications@github.com
wrote:

Hi,
Thanks for the great work. Currently I am using a-s-f in my project where I have number of complex forms with number of input fields, since the current implementation displays individual fields in separate row is there a way to display more than one field in the same row for example field1 and field2 in the same row instead of separate rows?
Can this be configured from $scope.form itself as a configuration parameter e.g. In Bootstrap terms field1 with col-4 and field2 with col-6.
Regards,

Ravindra.

Reply to this email directly or view it on GitHub:
#316

[ravivit9]

Thanks for the response. After adding htmlClass and fieldHtmlClass to two different fields but didn't had any effect. I think the fieldHtmlClass is specific to the filed itself rather than the container of the field.

I am using separate json file per section.

Please refer to the screen shot, I would like to minimize the length of the form.

[Dervisevic]

You're right about that, you can see how inputs are made here. You can see that htmlClass is used on the container of the field and fieldHtmlClass on the input itself.

So setting having a div.row around it and then having them in column vertical order with the col-md-x class should result in columns, you can always check out the dom and see whats going on but i think htmlClass should do it.

[ravivit9]

Applied the changes to $scope.form with htmlClass but for some reason the class is not being applied to the element container div.

{
  "key": "moh_designation",
  "type": "text",
  "placeholder": "Enter your designation in this position",
  "htmlClass":"col-lg-4"
},
{
  "key": "moh_grade",
  "type": "text",
  "placeholder": "Enter your Grade /  Level / Band within the organisation",
  "htmlClass":"col-lg-6"
},

Am I missing anything here?

[ravivit9]

Attaching screenshot of Inspect element.

[Dervisevic]

Not sure why it's not working for you, i popped your code into example and it rendered all right, see below:

Form:

  {
    "key": "moh_grade",
   "type": "text",
    "placeholder": "Enter your Grade /  Level / Band within the organisation",
    "htmlClass":"col-lg-6"
  }
]

Schema

{
  "type": "object",
  "title": "Comment",
  "properties": {
    "moh_grade": {
      "title": "Name",
      "type": "string"
    }
  }
}

[ravivit9]

I am using version 0.7.6 and the latest version is 0.8.0. I think it could be to do with version difference. I haven't updated my local a-s-f version after I have downloaded initially. May be this could be an issue.

[ravivit9]

After reading change log I understand these features were introduced in version v0.7.8. I will upgrade my local a-s-f today evening and update this ticket accordingly.

Thanks for your response.

[Dervisevic]

Doh, i should have thought of that, it was introduced in 0.7.8: https://github.com/Textalk/angular-schema-form/releases/tag/0.7.8

[ravivit9]

It's ok I must have updated / checked the library version.

I have updated the version to 0.8.0 and it's working fine. Please find the screenshot.

Once again thanks for all your hard work and responding to the queries quickly.

[anupamarachuri]

I am trying to create a grid using angular-schema-form. This is how my schema looks and the form. Its not working. Can you please suggest where could i be wrong?

{
"schema": {
"type": "object",
"title": "Grid Schema",
"properties": {
"grid1": {
"type": "object",
"description": "An Grid.",
"items": [
"grid1[].name",
"grid1[].age"
]
}
}
},
"form": [
{
"key": "grid1",
"type": "simple-grid"
}
],
"model": {
"grid1": [
{
"name": "Exert",
"age": 55
},
{
"name": "Tiancum",
"age": 43
},
{
"name": "Jacob",
"age": 27
},
{
"name": "Nephi",
"age": 29
},
{
"name": "Enos",
"age": 34
}
]
}
}

[VimalP0904]

The same issue I'm facing in react js please me help anyone