{"id":2280,"date":"2020-01-21T15:50:39","date_gmt":"2020-01-21T15:50:39","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=2280"},"modified":"2020-02-17T15:20:06","modified_gmt":"2020-02-17T15:20:06","slug":"using-flex-for-primeng-message-layout-vs-floatdisplaytable-cell","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=2280","title":{"rendered":"Using flex for PrimeNG message layout vs float\/display:table-cell"},"content":{"rendered":"<p>I\u2019m currently using PrimeNg 6.1.3 with the older themeroller architecture<\/p>\n<p>This has a glitch on message display as follows:<\/p>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\nimg(\"2020\/01\/21\/primeng\/1229-primeng-message-broken.png\",\"Original Version\",\"largeThumb\");\n\/\/ ]]><\/script><\/p>\n<p>I wanted the text to be indented past the LHS icon rather than on a new line.<\/p>\n<p>My old school version in my theme used a left float on the icon, and a display:table-cell on the &lt;ul&gt; text container.<\/p>\n<p>This worked fine as follows:-<\/p>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\nimg(\"2020\/01\/21\/primeng\/1046-primeng-message.png\",\"Original Version\",\"largeThumb\");\n\/\/ ]]><\/script><\/p>\n<p>I didn\u2019t like using display:table-cell but had to in this case as I had no control over the markup generated by the message component, only the theme SCSS.<\/p>\n<p>My second version, which is simpler, just removed the float and the display:table-cell, and made the containing div a flex container via display:flex.<\/p>\n<p>This worked in exactly the same way, and was all I needed to do. The flex defaults just worked with no strange tweaking required.<\/p>\n<p>The W3 Schools page on flex, including numerous try out examples that you can play with, is <strong><a href=\"https:\/\/www.w3schools.com\/css\/css3_flexbox.asp\">here<\/a>.<\/strong><\/p>\n<p><strong>PrimeNG Generated Markup<\/strong><\/p>\n<blockquote><p>&lt;div class=&#8221;ui-messages ui-widget ui-corner-all ng-tns-c2-0 ng-trigger ng-trigger-messageAnimation ng-star-inserted ui-messages-warn&#8221; style=&#8221;display: block; transform: translateY(0px); opacity: 1;&#8221; ng-reflect-ng-class=&#8221;[object Object]&#8221;&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&lt;a class=&#8221;ui-messages-close ng-tns-c2-0 ng-star-inserted&#8221; href=&#8221;#&#8221; style=&#8221;&#8221;&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class=&#8221;pi pi-times&#8221;&gt;&lt;\/i&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&lt;\/a&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;ui-messages-icon pi pi-exclamation-triangle&#8221; ng-reflect-klass=&#8221;ui-messages-icon pi&#8221; ng-reflect-ng-class=&#8221;pi-exclamation-triangle&#8221;&gt;&lt;\/span&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&lt;ul class=&#8221;ng-tns-c2-0&#8243;&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&#8221;ng-tns-c2-0 ng-star-inserted&#8221; style=&#8221;&#8221;&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;ui-messages-summary ng-tns-c2-0 ng-star-inserted&#8221;&gt;Age Invalid:&lt;\/span&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=&#8221;ui-messages-detail ng-tns-c2-0 ng-star-inserted&#8221;&gt;Your age is\u00a0 outside the required age range of 18 to 50&lt;\/span&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/li&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;<br \/>\n&lt;\/div&gt;<\/p><\/blockquote>\n<p><strong>Original Style Fragment (SCSS)<\/strong><\/p>\n<blockquote><p>.ui-messages.ui-widget {<br \/>\npadding: .5em;<br \/>\nborder: 0 none;<br \/>\ncolor: $contentTextColor;<\/p>\n<p>.ui-messages-icon {<br \/>\n<strong>\u00a0\u00a0\u00a0\u00a0\u00a0 float: left;<\/strong><br \/>\nmargin-right: .1em;<br \/>\n}<br \/>\n&amp;, .ui-messages-close {<br \/>\ncolor: $headerIconTextColor;<br \/>\n~ ul {<br \/>\npadding-right: 1.4em;<br \/>\n}<br \/>\n.pi, .ui-messages-icon.pi {<br \/>\nfont-size: 1.6em;<br \/>\n}<br \/>\n}<br \/>\n<strong>\u00a0\u00a0\u00a0 ul {<br \/>\ndisplay:table-cell;<br \/>\n}<\/strong><br \/>\n.ui-messages-summary {<br \/>\nmargin-left: 0;<br \/>\n}<br \/>\n&amp;.ui-messages-success {<br \/>\nbackground-color: #b7d8b7;<br \/>\n}<br \/>\n\/*&#8230;other message severities&#8230; *\/<br \/>\n}<\/p><\/blockquote>\n<p><strong>Flex Style Fragment (SCSS)<\/strong><\/p>\n<blockquote><p>.ui-messages.ui-widget {<br \/>\n<strong>\u00a0 \/* We have to use !important here as the markup (which we cannot control)<br \/>\nuses an inline style for display:block \ud83d\ude41 *\/<br \/>\ndisplay: flex !important;<br \/>\n<\/strong>\u00a0\u00a0\u00a0 padding: .5em;<br \/>\nborder: 0 none;<br \/>\ncolor: $contentTextColor;<\/p>\n<p>.ui-messages-icon {<br \/>\nmargin-right: .1em;<br \/>\n}<br \/>\n&amp;, .ui-messages-close {<br \/>\ncolor: $headerIconTextColor;<br \/>\n~ ul {<br \/>\npadding-right: 1.4em;<br \/>\n}<br \/>\n.pi, .ui-messages-icon.pi {<br \/>\nfont-size: 1.6em;<br \/>\n}<br \/>\n}<br \/>\n.ui-messages-summary {<br \/>\nmargin-left: 0;<br \/>\n}<br \/>\n&amp;.ui-messages-success {<br \/>\nbackground-color: #b7d8b7;<br \/>\n}<br \/>\n\/*&#8230;other message severities&#8230; *\/<br \/>\n}<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019m currently using PrimeNg 6.1.3 with the older themeroller architecture This has a glitch on message display as follows: I wanted the text to be indented past the LHS icon rather than on a new line. My old school version in my theme used a left float on the icon, and a display:table-cell on the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[198,209,77],"tags":[],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2280"}],"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=2280"}],"version-history":[{"count":31,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2280\/revisions"}],"predecessor-version":[{"id":2343,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/2280\/revisions\/2343"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}