RadGalleryItem long text breaks item margin

[Kun]

Hello,

I found a weird behavior that if the text of RadGalleryItem is longer than the image width, the margin/padding settings will lost.

To reproduce the issue, I changed the demo from:

https://www.telerik.com/forums/radgalleryelement-display-issue

RadGalleryItem blueItem1 = new RadGalleryItem("blue 1", Properties.Resources.group);
this.radGalleryElement1.Items.Add(blueItem1);
blueItem1.TextImageRelation = TextImageRelation.ImageAboveText;
blueItem1.ImageAlignment = ContentAlignment.MiddleCenter;
blueItem1.Margin = new Padding(1);

RadGalleryItem blueItem2 = new RadGalleryItem("blue 222222222", Properties.Resources.group);
this.radGalleryElement1.Items.Add(blueItem2);
blueItem2.Margin = new Padding(1);
blueItem2.TextImageRelation = TextImageRelation.ImageAboveText;
blueItem2.ImageAlignment = ContentAlignment.MiddleCenter;

RadGalleryItem blueItem3 = new RadGalleryItem("blue 3", Properties.Resources.group);
this.radGalleryElement1.Items.Add(blueItem3);
blueItem3.Margin = new Padding(1);
blueItem3.TextImageRelation = TextImageRelation.ImageAboveText;
blueItem3.ImageAlignment = ContentAlignment.MiddleCenter;

RadGalleryItem blueItem4 = new RadGalleryItem("blue 4", Properties.Resources.group);
this.radGalleryElement1.Items.Add(blueItem4);
blueItem4.Margin = new Padding(1);
blueItem4.TextImageRelation = TextImageRelation.ImageAboveText;
blueItem4.ImageAlignment = ContentAlignment.MiddleCenter;

 

Please see the attach photo.

I've done 3 tests. First 2 tests work well as long as the text size is shorter than image width.

In the third one, I named on purpose blueItem2 with a long name "blue222222". In this case, I've lost all my margin settings.

 

[Kun]

Attach photo is here.

[Dimitar]

Hello Kun,

The items in the gallery are sized according to the largest item and they have an equal size so they can be arranged in columns. However, you should stretch the items and their content will be centered:

RadGalleryItem blueItem1 = new RadGalleryItem("blue 1", image);

this.radGalleryElement1.Items.Add(blueItem1);
blueItem1.StretchHorizontally = true;
blueItem1.TextImageRelation = TextImageRelation.ImageAboveText;
blueItem1.ImageAlignment = ContentAlignment.MiddleCenter;
blueItem1.Margin = new Padding(1);

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik

[Kun]

Hello Dimitar,

Thank you for your reply. To make all items have the same size, I add these in my script. Because I cannot know the text length by advance. It works better. If the text is too long to show, it shows "..." for the rest of text.

blueItem.AutoSize = false;
blueItem.Size = new Size(50, 50);

 

But the margin between items seems not to have worked. I've set:

blueItem. Margin = new Padding(5);

Margin works only at the outer of the items collection.

Please see the attach photo.

Best regards,

[Dimitar]

Hello Kun,

You need to leave the AutoSize property in this case (this property should not be used with our elements, it exists only for some specific cases). The items width will be dynamically measured and if you want to limit the size set the MaxSize property:

item.MaxSize = new Size(50, 50);

Should you have any other questions do not hesitate to ask.

 

Regards,
Dimitar
Progress Telerik