Putting text above border: ZIndex?

2 Answers 71 Views
Label
tar
Top achievements
Rank 2
Iron
Iron
Iron
tar asked on 06 Sep 2023, 02:59 PM

Hi,

I want to display text above the (bottom) border. Therefore, I am experimenting with RadLabel and tried this by setting the ZIndex of LabelElement.LabelText above the ZIndex of LabelElement.LabelBorder which unfortunately does not work. All overlapping letters are just cut. Now, I would need to expand the controls size by which the border would move further below the text which is not what I want.

How can I achieve this?

It would be even better if the border would leave some space around the text like in your web menu here on any "overlapping" letter ("j", "g", "p", "q", "y") but I assume this is not possible.

2 Answers, 1 is accepted

Sort by
0
Accepted
tar
Top achievements
Rank 2
Iron
Iron
Iron
answered on 11 Sep 2023, 09:05 PM

Solved it via Margin and Padding:

Code:

protected override void OnLoad(EventArgs e) {
  base.OnLoad(e);

  BackColor = Color.FromArgb(8, 16, 24);

  if (radLabel.LabelElement is RadLabelElement label) {
    label.Font      = new("Segoe UI", 16.75F, FontStyle.Regular, GraphicsUnit.Point, 0);
    label.ForeColor = Color.White;
    label.Margin    = new( 0, 0,  0,  7);
    label.Padding   = new(10, 0, 10, -7);
  }

  if (radLabel.LabelElement.LabelBorder is BorderPrimitive border) {
    border.BorderDashStyle = DashStyle.Solid;
    border.BoxStyle        = BorderBoxStyle.FourBorders;
    border.Visibility      = ElementVisibility.Visible;

    border.BottomColor = Color.FromArgb(120, 173, 80);
    border.LeftColor   =
    border.RightColor  =
    border.TopColor    = Color.Transparent;
  }
}

Dinko | Tech Support Engineer
Telerik team
commented on 12 Sep 2023, 09:07 AM

I am happy to hear that you were able to find a solution for your scenario and thank you for sharing it with the community.
0
Dinko | Tech Support Engineer
Telerik team
answered on 07 Sep 2023, 01:15 PM

Hi M.S.,

Thank you for the provided details.

Upon trying to follow your steps, I am not sure I was able to observe this behavior. Could it be possible to modify the attached project and demonstrate this overlapping so I can take a closer look? My test so far shows that the BorderPrimitve element does not overlap the label text letters. I think I am missing something here. You can also share which theme are you using in your application.

I am looking forward to your reply.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Label
Asked by
tar
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
tar
Top achievements
Rank 2
Iron
Iron
Iron
Dinko | Tech Support Engineer
Telerik team
Share this question
or