Multiline button text

1 Answer 103 Views
Button
MIDAS
Top achievements
Rank 1
Iron
Iron
MIDAS asked on 08 Feb 2024, 05:17 PM | edited on 09 Feb 2024, 11:05 AM

Is it possible to create a button with two lines of text?

 

I have a grid with a column for uniqueIDs. As these are usually 32 chars long I would like to display them over two lines within a button (the button will link to a page that displays a log of the end 2 end processing for that id). I have created a pipe to transform the given uniqueID into two lines of text. My pipe is:


export class HexSplitPipe implements PipeTransform {
  transform(value: string): string {
    // will take given sting and split into two lines
    const length = value.length;
    const halfLength = Math.floor(length / 2);
    // If the length is even, split evenly into two lines
    if (length % 2 === 0) {
      const firstHalf = value.substring(0, halfLength);
      const secondHalf = value.substring(halfLength);
      return `${firstHalf}
&#10${secondHalf}`;
    } else {
      // If the length is odd, add one more character to the first line
      const firstHalf = value.substring(0, halfLength + 1);
      const secondHalf = value.substring(halfLength + 1);
      return `${firstHalf}
&#10${secondHalf}`;
    }
  }

}

My component has the following in the uniqueID grid-column:

<kendo-grid-column field="uniqueID" title="UID" [width]="240">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button kendoButton (click)="btnE2EHistoryClick(dataItem.uniqueID)"
title=
"Click to see full processing history">{{dataItem.uniqueID | hexSplit}}</button>
        </ng-template>
   

</kendo-grid-column>

If my UniqueID = 028F88D7E5D26C5CE063588E680A7E9E
If want to get:
028F88D7E5D26C5C
E063588E680A7E9E

Instead I get: 028F88D7E5D26C5C&#13;&#10;E063588E680A7E9E

 

How can I render the string over two lines in a kendo button

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Zornitsa
Telerik team
answered on 12 Feb 2024, 07:32 AM

Hi,

Thank you for the provided code snippet.

What I am noticing is that the HexSplitPipe returns a string, which means that when passed as content for the Button component, it will be treated as text. Therefore, the respective Unicode characters used for line breaks will not be recognized as such.

In order to overcome this issue, I would suggest using the newline character - '\n', combined with 'white-space: pre-line' CSS declaration for the line break to take effect:

return `${firstHalf}\n${secondHalf}`;
.multiline-btn {
    white-space: pre-line
}

Below you can observe a StackBlitz example implementing your approach, modified with the proposed suggestions:

Hope that the provided information is helpful. Let me know in case you have any further questions.

Regards,
Zornitsa
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
MIDAS
Top achievements
Rank 1
Iron
Iron
commented on 13 Feb 2024, 10:25 AM

Many Thanks.... This worked perfectly
Tags
Button
Asked by
MIDAS
Top achievements
Rank 1
Iron
Iron
Answers by
Zornitsa
Telerik team
Share this question
or