RadGalleryItem long text breaks item margin

5 posts, 0 answers
  1. Kun
    Kun avatar
    44 posts
    Member since:
    Aug 2018

    Posted 20 Feb 2019 Link to this post

    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.

     

  2. Kun
    Kun avatar
    44 posts
    Member since:
    Aug 2018

    Posted 20 Feb 2019 Link to this post

    Attach photo is here.
  3. Dimitar
    Admin
    Dimitar avatar
    2902 posts

    Posted 21 Feb 2019 Link to this post

    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.
  4. Kun
    Kun avatar
    44 posts
    Member since:
    Aug 2018

    Posted 21 Feb 2019 in reply to Dimitar Link to this post

    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,

  5. Dimitar
    Admin
    Dimitar avatar
    2902 posts

    Posted 22 Feb 2019 Link to this post

    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.
Back to Top