Setting Border Has No Effect When Using Grouped Container With Title

[nareck]

Hi guys,

Using v8.3p_2013-03-01.

Seems like calling setBorder on a DynamicForm (as well as Layout classes) has no effect when the form has a group title. The other odd thing is that by default for IE 9 the border is set to a brownish color and for FireFox (20.0.1) and Chrome (26.0.1410.64 m) to a bluish color. You can see it in the Various Controls showcase.

Here is my code:

DynamicForm settingsForm = new DynamicForm ();
settingsForm.setPadding (10);
settingsForm.setWidth (60);
settingsForm.setHeight (60);
settingsForm.setNumCols (1);
settingsForm.setIsGroup (true);
settingsForm.setGroupTitle ("Setup");
settingsForm.setBorder ("2px solid red");
StaticTextItem someLabel = new StaticTextItem ("name1", "name");
settingsForm.setItems (someLabel);

How to change the border in this case? I need a UI consistency between mentioned browsers.

Thanks in Advance,
Cheers

[Isomorphic]

Hi Narek
This is controlled by a currently undocumented property of Canvas, "groupBorderCSS".
If you look in the load_skin.js file this property is being set, and it defaults to different values depending on whether your browser is in "CSS3" mode or not, which accounts for the difference between IE and other browsers.

You can resolve this for now by explicitly setting the property to the same value in all cases. This could be done by customizing your load_skin.js file to modify this setting, or adding code directly to the bootstrap file (after loading the SmartClient libraries), or using JSNI.

The JavaScript code would look like this:

isc.Canvas.addProperties({
    groupBorderCSS:"1px solid red"
});

We'll take a look at changing the defaults to be consistent for this skin in the framework, and at exposing this property for easier customization in the future.

Regards
Isomorphic Software

[nareck]

Hi,

Thanks a lot for the answer!

BTW, it also fixed some other issues (for Firefox and Chrome) I had concerning browser compatibility: one was the sizing of some titled DynamicForms got expected values, the other had to do with TransferImgButton, they were missing the bottom part of the border.