IWCGJQRegions

[jredoc]

Hello

From a usability perspective, it would be great if the individual borders of a region could have either their style or color (or both) be individually modified.

For example, with two regions whose Align := altop were next to each other. All borders would be the same color, width and style:= sold with exception of the top border of the lower grid would be invisible and the lower border of the top grid whose Style := cbsDashed. This could visually identify the two grids to the end user as distinct regions but yet related to each other in some manner defined by the application.

TIA

John

[George]

You can use CSS rules. It's more correct way for such task.

[Alexander Bulei]

Hi John,

From a usability perspective, it would be great if the individual borders of a region could have either their style or color (or both) be individually modified.

You can use CSS rules. It's more correct way for such task.

Extract

Best Regards.

[jredoc]

Gentlemen

This is where my weakness with CSS and HTML scripting becomes quite obvious.

I understand how to alter a component property when a specific style parameter is associated with the specific property, for example
IWCGPanelList1.Items.Items[0].ItemStyle.Add('color:black');
IWCGPanelList1.Items.Items[1].ItemStyle.Add('color:red');

Also, the CGAppearanceSettiongs.BorderVisiblity property allow the visibility of the sides of a region's border to be individually modified.

However, I don't understand how to utilize CSS to effect a style and/or color change for an individual side of an individual region's border when the BorderOptions property does not delineate the individual sides of a region's border.

I would greatly appreciate an example of what you reference.

John

[George]

Hi!
Each IWCGPanelList item has "ItemCSS" property.
Add any string, for example "MyPLItem" to "ItemCSS" property.
Final string will be "panellist-nav-item-li wRegionLeftMenu".
Then, create txt file, save as "wwwroot\ui-themes\MyStyles.css".
Add text to MyStyles.css:
css code

.MyPLItem{
	border-right: 1px dotted #F00;
}

Open servercontroller unit, add code to "BaseConfig" event handler:
delphi code

ContentFiles.Add('ui-themes\MyStyles.css');

[Alexander Bulei]

Hi John,

You can use the Style property to do this.

Set the BorderOptions:

delphi code

BorderOptions.NumericWidth:= 1;
BorderOptions.Style:= cbsSolid;

Example Style property:

22-01-2014 14-23-16.png

Result:

22-01-2014 14-23-02.png

Check the available css properties here: http://www.w3schools.com/cssref/pr_border-bottom_color.asp (left column)

Best Regards.