framework7

Open full view…

how to wrap 'item-title'?

jonnok
Sat, 24 Jun 2017 18:46:49 GMT

By default the item-title class generates .... when the text reaches a certain text. I want it to wrap instead and go to the next line. I am really struggling to do this. Any suggestions? <div class="item-title">Here is some text that I want to wrap</div>

NikolayKuznetsov
Sun, 25 Jun 2017 05:08:11 GMT

--- .catalog-list .item-title { white-space: normal !important; } ---

jonnok
Sun, 25 Jun 2017 09:05:16 GMT

Thank you for your response. That however doesn't do anything different. The text is still not wrapped but just when it gets to the end of the line adds .....

NikolayKuznetsov
Sun, 25 Jun 2017 14:34:38 GMT

Example https://jsfiddle.net/Nikoniko/0g0tmxnv/1/

jonnok
Sun, 25 Jun 2017 19:28:20 GMT

Thank you! Removing .catalog-list seems to have done the trick. However, the text now is above the image instead of in line with it as it was before. [Screendump](//muut.com/u/framework7/s1/:framework7:HABd:screendump.jpg.jpg)

jonnok
Sun, 25 Jun 2017 19:30:12 GMT

---<a href=“article.html?id=${data[item].id}” class=“item-link item-content” > <div class=“item-media”><img src=“img/${data[item].n_pic}” width=“80”></div> <div class=“item-inner”> <div class=“item-title-row”> <div class=“item-title”>${data[item].n_title}</div>

NikolayKuznetsov
Mon, 26 Jun 2017 05:33:28 GMT

No that problem, but I dotn't use .item-title-row Screenshot https://image.prntscr.com/image/9qIrK1ynRfSfcEFZF-QBdg.jpeg Styles for my list with class .catalog-list --- .catalog-list .item-inner { overflow: hidden !important; padding-bottom: 0 !important; padding-top: 0 !important; } .catalog-list .item-title { max-height: 100%; white-space: normal !important; font-size: 15px; text-align: left; margin: auto; width: 100%; } ---

jonnok
Mon, 26 Jun 2017 17:15:00 GMT

Is there any chance you could put this in a jsfiddle? It still isn't working for me. I will show you. I have included some pics. [Original](//muut.com/u/framework7/s1/:framework7:w4oL:original.jpg.jpg) [Wrapped](//muut.com/u/framework7/s1/:framework7:teRJ:wrapped.jpg.jpg)

jonnok
Mon, 26 Jun 2017 20:06:17 GMT

Never mind, I removed <div class="item-text"></div> and the issue was resolved. I have another issue but will post a new question for that.