Custom Styles in Form


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…




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

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