Styling FormItem together with its title

[kshamir]

Hi Isomorphic,

I'm using this version: v12.1p_2020-10-20 and trying to set a border around a form item and its title, like this:



I read the documentation about FormItem Styling, but I didn't find a way to get the above result. As far as I understand it, the control and the title can only be styled separately.

From DOM perspective - I would like to get to the proper "TR" element and set the CSS class on it.

Can you advise how to do that?


Thanks
Kobi

[Isomorphic]

Please read the FormLayout overview: the titles for FormItems are part of the overall layout and not part of the item as such.

If have a single-item form, either set isGroup on the form as a whole or set a CSS border on it.

Presumably you do not want weird borders all over the place in a multi-item form, but if so, then please show us what appearance you are trying to achieve.

[kshamir]

I read about FormLayout and now I better understand the layout and the independency between FormItems and their respective titles.

Unfortunately, I'm not talking about a single-item form.

I Have a multi-item form, and I want to "highlight" only one field at a time, by using a border like this:




We need a solution that will work with any kind of FormItem - TextBox, CheckBox, RadioGroup, ComboBox..etc.
Any ideas?

[Isomorphic]

If there's one element at a time, you should just put an element over the form, which will avoid problems with the whole form shifting around when you increase the border from nothing to something.

You could also achieve this by changing both the titleStyle and cellStyle, with 3-quarter borders on each, however, it's not clear whether all browsers will render that as a continuous border, and also, sometimes the cell is much bigger than the value area (eg if there are wider items in the same column), which might not look very good.

[kshamir]

OK..I like the first suggestion. I'll try to implement it
thanks