How to add a custom class?

[subratastack]

I have a condition on my layout

"other",
                        {
                            "key" : "other_explain",
                            "condition" : "model.other",
                            "type" : "textarea"
                        }

Now I want to add a custom class to other_explain key.

[RichardMViGEM]

What exactly are you trying to achieve? Do you want the textarea widget to have a custom HTML class? Something like this? <textarea class="yourCustomClass">...</textarea> ?

I'm not an expert user of this plugin but afaik, that's not possible. You could try using the form array in the json-definition of your form, wrap a "parent" section element around your other_explain, assign yourCustomClass to that and do some CSS-magic. I'm thinking of something like this:

"form": [
  {
    "type": "section",
    "htmlClass": "yourCustomClass",    // parent-div with your custom class
    "items": [
      "other_explain"                  // your textarea "other_explain"
    ],
    ...

Hope this helps. But I suggest you describe what you want to achieve in a little bit more detail

[subratastack]

@RichardMViGEM <textarea class="yourCustomClass">...</textarea> This is what I want to acheive.

[rmayuri]

@subratawebops
have you got the solution

[subratastack]

@rmayuri try this

layout = [
    ... ,
    {
         key: 'MY_KEY',
         title: 'MY_TITLE',
         htmlClass: 'custom_css_class',
         fieldHtmlClass: 'custom_field_css_class', 
         labelHtmlClass: 'custom_label_css_class', 
         itemLabelHtmlClass: 'custom_itemlabel_css_class',
         activeClass: 'custom_active_css_class',
         labelHelpBlockClass: 'custom_help_css_class',
         etc..

    },
    ...
]

I haven't tried this yet but this from a old issues I posted here.

[catull]

Have you tried this:

{
      "key" : "other_explain",
      "condition" : "model.other",
      "type" : "textarea",
       "htmlClass": 'yourCustomClass'
}

?

[subratastack]

This doesn't work at all.

[rmayuri]

@subratawebops

it worked for me, place the css in style.css file

[subratastack]

@rmayuri Could you tell me which css class getting applied among

htmlClass: 'custom_css_class',
         fieldHtmlClass: 'custom_field_css_class', 
         labelHtmlClass: 'custom_label_css_class', 
         itemLabelHtmlClass: 'custom_itemlabel_css_class',
         activeClass: 'custom_active_css_class',
         labelHelpBlockClass: 'custom_help_css_class'

[subratastack]

@rmayuri Worked for me after I make the key as object of item array. Thanks for you help.

[cipriandrusca]

I'm using angular2-json-schema-form as a dependency and I want to apply some custom classes to the fields and I didn't manage to do it. Any ideas please?

[rmayuri]

mylayout = [

{ key: 'msid',
labelHelpBlockClass: 'col-xs-10',
fieldHtmlClass:"form-control",
labelHtmlClass: "col-xs-2",

}
]

add style class in style.css file

[cipriandrusca]

I don't know why I need it and where to put it. The idea is that in the past I had a module named "angular-json-form-renderer" (which was a custom angular2-json-schema-form) and there I didn't had styles or something, the custom styles were applied without any "myLayout" . Now, I use directly "angular2-json-schema-form" as a dependency and the styles are not working. I hope you understand the issue.