Wrapping text in list items ?

[AYehia0]

I have a simple bubbletea program where I split the screen into 2 to show 2 lists.
I have a problem is that if the item's width/length is large > 50, only the first 50 char are displayed, rest with ...

Here is what I am doing :

type item struct {
	title, desc  string
	ayah         quran.Ayah
	surahsInPage string
	ayahNumber   int
	endOfSurah   bool
}

func (i item) Title() string {
	ayahWidth := 80
	text := lipgloss.NewStyle().Width(ayahWidth).Render(fmt.Sprintf("%s", i.ayah.Text))
	return text
}

[bashbunni]

Hmmmm I know that reflow does a great job with wrapping text, but I haven't tried using it for list item titles...
https://github.com/muesli/reflow

I'll take a quick look

[bashbunni]

Hey @AYehia0, it would work most reliably if you build your own list component. I tested out a list example with custom height and width fields, but it wouldn't render reliably at different widths.

This example would be a great starting point for a multi-line title solution: https://github.com/charmbracelet/bubbletea/tree/master/examples/list-simple

For your reference, here's roughly what it looked like when I was making edits to the list item widths and heights using the DefaultDelegate:

...
	delegate := list.NewDefaultDelegate()
	delegate.Styles.NormalTitle.Width(80)
	delegate.Styles.SelectedTitle.Width(80)
	delegate.Styles.NormalTitle.MaxHeight(2)
	delegate.Styles.SelectedTitle.MaxHeight(2)
	delegate.SetHeight(3)
	m := model{list: list.New(items, delegate, 0, 0)}
...

I hope that helps! Don't hesitate to reach out if you have any questions

[AYehia0]

Hey @bashbunni , thanks for replying.

I tried the solution you proposed, but unfortunately it doesn't display the full text as shown below :

here is my snippet :

...
	listDelegate.Styles.SelectedTitle.Width(40)
	listDelegate.Styles.SelectedTitle.MaxWidth(40)
	listDelegate.Styles.NormalTitle.Width(50)
	listDelegate.Styles.NormalTitle.MaxWidth(150)

	listDelegate.Styles.SelectedTitle.MaxHeight(2)
	listDelegate.Styles.NormalTitle.MaxHeight(2)
	listDelegate.SetHeight(3)
	listDelegate.SetSpacing(3)
...

btw, I really like your content, keep it up 😄

[bashbunni]

@AYehia0 Thank you! I would suggest making a custom list component then. There's a lot happening under the hood with the list bubble that makes it require a fixed height from all elements in the list. That example I linked previously should be a good place to start! Let us know if you have any questions along the way

[AYehia0]

Thanks @bashbunni, quick question what do you mean by a custom list component? do you mean custom rendering method like this here.