List items with thumbnails problem

[sc]

Hi

I’m trying to create a thumbnail list which is a list of document thumbnails and their titles. It’s all working but the problem I have is that the document titles don’t all align smoothly to the left next to the thumbnail. I thought it was to do with the size of the thumbnails varying, but I tried to fix the width on those but it didn’t help. I then surrounded my document titles with a span and set the width on that, and it seems to have fixed the problem, but it’s only good for my very small ipod touch in portrait. It seems to be related to having long titles (Mine spread out onto 3 lines) displayed on a narrow screen, and it seems to work out for each list item what’s the best fit between the thumbnail and its text, but it isn’t the same for all. Am I missing something?

Here’s my bit of code that generates the lists (I’m using Velocity templates to generate the code):

	<ons-list>
    	#foreach ($bookmark in $personalBookmarks)
	       <ons-list-item modifier="chevron">
	 	      <div class="left">
		        <img class="list__item__thumbnail" src="$!alfrescoThumbnailUrlPreId$!bookmark.alfrescoId$!alfrescoThumbnailUrlPostId"">
		      </div>
		      <div class="center">
		        <span style="width: 200px; padding: 8px 0;">$!bookmark.displayname</span>
		      </div>  
		     </ons-list-item>    
		#end
	</ons-list>

[Fran Diox]

@sc I guess you are following this structure, right?
We also have list__item__title and list__item__subtitle classes. Perhaps you can split the long titles in title+subtitle?

By the way, you have double "" at the end of the image src, but I guess that’s not the issue.

[sc]

Yes, that’s correct I copied the example exactly from that page. I think the problem is having long text, that goes multi-line, on a narrow screen. If I display the page in a desktop browser that is much wider, the text and thumbnails line up perfectly. Fixing the width of the text fixes the issue on mobile. I can’t come up with any css that works on all widths though.

I’ll give the list_item_title and list_item_subtitle a try. Maybe I need to format the text better somehow.

[sc]

Hi

Making some slow progress. I don’t suppose you can point me to the documentation on those list_item_title and list_item_subtitle classes. I thought I’d seen it a few weeks ago but now I can’t find it. I thought there was also a series of page templates, or such like, with examples of different layouts but I can’t find them either.

Also, do you know whether any of these classes shorten strings with a dot dot dot, or do you have to use a library such as dotdotdot?

[Fran Diox]

@sc
The classes are used in this tutorial.
The page templates you mention I guess is our components page.
About the “dot dot dot” thing, do you mean CSS ellipsis?

[sc]

That’s what I was looking for. Missed the Cute Kitty example.

Re dotdotdot thought I’d seen a component example with long text shortened by ellipsis. Wondered how you were doing it and whether list__item__title did it automatically. I’ve been using jquery dotdotdot and forgot about the CSS.

Thank you very much.