Skip to content

Stepper: Discrepancies with WC when having a long title/subtitle #16829

@RivaIvanova

Description

@RivaIvanova

Description

Example text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

1. Step title/subtitle size

Horizontal mode, titlePosition top/bottom

Image

Horizontal mode, titlePosition start/end

Image
  • In both cases, the Angular step title is quite longer compared to the WC one.

2. Missing ellipses

Vertical mode, titlePosition top/bottom - There are no ellipses at the end of the text of the Angular step title. With titlePosition start/end, there are.

Image Image

3. Angular steps can get hidden if the first step has very long text.

Horizontal mode. Set the example text as the first step title/subtitle.

Image
  • igniteui-angular version: master, 21.0.x, 20.1.x
  • browser:

Steps to reproduce

  1. Open the stepper demo http://localhost:4200/stepper and configure according to the above examples.

Result

In description.

Expected result

Aligned with the WC stepper.

Attachments

Attach a sample if available, and screenshots, if applicable.

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions