Custom Styles in Form

Suite and Optimus Suite 5
#1

It seems that the className attribute is not fully supported in Forms.

For INPUT elements, when the Form Object is defined in JSON, you can work around by using the style="{…}" construct, but for BUTTON elements, this does not work.

When the construct className=“xxx” is used, the specified class is not applied as expected.

So, in this JSON FORM definition:

[
{type: “fieldset”,name: “form_data”,label: “Example”,width: 400,list:
[
{type: “input”,id: “input 1”, value: “”, name: “input 1”,label: “INPUT 1”,inputWidth: 100 , validate: “ValidAplhaNumeric”, style: “background-color: #AFAF9F;”, position: “label-right”},
{type:“button”,name:“button 1”, className:“customButton0”, value:“BUTTON 1”, width:“100”}
]
}
]

the correct background-color is applied to the INPUT, but not to the BUTTON, but, strangely, a bar of the specified colour appears above the button.

The className “customButton0” is defined as an in-line STYLE:

.dhxform_base div.customButton0 {background-color: #AFAF9F;}

I suspect that the Class declaration in the tag is incorrect: i.e. the “.dhxform_base div.” part.

Any help would be appreciated…

Thanks

Richard

#2

As I suspected, the problem was with my <STYLE> declarations. The following work as expected for Buttons and Input controls respectively:

<STYLE>
.customButton1 div.dhxform_btn {background-color: #ce3e22; !important}
.customInput1 .dhxform_textarea {background-color: #e9f688; !important}
</STYLE>