This is a migrated thread and some comments may be shown as answers.

RadGalleryItem long text breaks item margin

4 Answers 22 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Kun
Top achievements
Rank 2
Kun asked on 20 Feb 2019, 05:22 PM

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.

 

4 Answers, 1 is accepted

Sort by
0
Kun
Top achievements
Rank 2
answered on 20 Feb 2019, 05:23 PM
Attach photo is here.
0
Dimitar
Telerik team
answered on 21 Feb 2019, 10:45 AM
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
Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kun
Top achievements
Rank 2
answered on 21 Feb 2019, 11:53 AM

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,

0
Dimitar
Telerik team
answered on 22 Feb 2019, 11:38 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
RibbonBar
Asked by
Kun
Top achievements
Rank 2
Answers by
Kun
Top achievements
Rank 2
Dimitar
Telerik team
Share this question
or