{"id":1912,"date":"2017-03-09T10:48:53","date_gmt":"2017-03-09T10:48:53","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1912"},"modified":"2018-10-10T17:15:57","modified_gmt":"2018-10-10T17:15:57","slug":"ion-listion-item-formatting-issuesoptions","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1912","title":{"rendered":"ion-list\/ion-item formatting issues\/options"},"content":{"rendered":"<p>An &lt;ion-item&gt; is used (among other things) as the child of an ion-list and has a number of options, detailed <a href=\"https:\/\/ionicframework.com\/docs\/v2\/api\/components\/item\/Item\/\">here<\/a>.<\/p>\n<p>A particular issue I hit was that by default text in an item is truncated with an ellipsis on the end, whereas I wanted it to wrap and grow the item height.<\/p>\n<p>Points on this:-<\/p>\n<ol>\n<li>The item is set to have a <em>min-height<\/em> and so is capable of expanding down.<\/li>\n<li>By default, it is set to have<em> white-space:nowrap <\/em>which prevents wrapping, and text-overflow:ellipsis which gives the ellipsis.<\/li>\n<li>Wrap can be enabled per the text alignment section in the above <a href=\"https:\/\/ionicframework.com\/docs\/v2\/api\/components\/item\/Item\/\">ion-item page<\/a>, using a utility attribute documented <a href=\"https:\/\/ionicframework.com\/docs\/v2\/theming\/css-utilities\/\">here<\/a>. These attributes are useful as they allow general types of text transformation on a variety of components. In this case, adding the <em>text-wrap<\/em> attribute to the ion-item allows the text to wrap \u2013 it triggers a css attribute selector to set <em>white-space:wrap<\/em> (a neat use of custom attributes on a custom tag to trigger a css style rule directly).<\/li>\n<li>Note that the container for the ion-item and its various parent containers are all set to <em>overflow:hidden<\/em>, but this does not prevent text wrapping when <em>white-space:wrap<\/em> is in effect as above.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>An &lt;ion-item&gt; is used (among other things) as the child of an ion-list and has a number of options, detailed here. A particular issue I hit was that by default text in an item is truncated with an ellipsis on the end, whereas I wanted it to wrap and grow the item height. Points on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[200],"tags":[199,16],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1912"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1912"}],"version-history":[{"count":3,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1912\/revisions"}],"predecessor-version":[{"id":2177,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1912\/revisions\/2177"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}