Salient Soft

I’m 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 <ul> text container.

This worked fine as follows:-

I didn’t 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.

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.

This worked in exactly the same way, and was all I needed to do. The flex defaults just worked with no strange tweaking required.

The W3 Schools page on flex, including numerous try out examples that you can play with, is here.

PrimeNG Generated Markup

<div class=”ui-messages ui-widget ui-corner-all ng-tns-c2-0 ng-trigger ng-trigger-messageAnimation ng-star-inserted ui-messages-warn” style=”display: block; transform: translateY(0px); opacity: 1;” ng-reflect-ng-class=”[object Object]”>
   <a class=”ui-messages-close ng-tns-c2-0 ng-star-inserted” href=”#” style=””>
      <i class=”pi pi-times”></i>
   </a>
   <span class=”ui-messages-icon pi pi-exclamation-triangle” ng-reflect-klass=”ui-messages-icon pi” ng-reflect-ng-class=”pi-exclamation-triangle”></span>
   <ul class=”ng-tns-c2-0″>
      <li class=”ng-tns-c2-0 ng-star-inserted” style=””>
         <span class=”ui-messages-summary ng-tns-c2-0 ng-star-inserted”>Age Invalid:</span>
         <span class=”ui-messages-detail ng-tns-c2-0 ng-star-inserted”>Your age is  outside the required age range of 18 to 50</span>
      </li>
   </ul>
</div>

Original Style Fragment (SCSS)

.ui-messages.ui-widget {
padding: .5em;
border: 0 none;
color: $contentTextColor;

.ui-messages-icon {
      float: left;
margin-right: .1em;
}
&, .ui-messages-close {
color: $headerIconTextColor;
~ ul {
padding-right: 1.4em;
}
.pi, .ui-messages-icon.pi {
font-size: 1.6em;
}
}
    ul {
display:table-cell;
}
.ui-messages-summary {
margin-left: 0;
}
&.ui-messages-success {
background-color: #b7d8b7;
}
/*…other message severities… */
}

Flex Style Fragment (SCSS)

.ui-messages.ui-widget {
  /* We have to use !important here as the markup (which we cannot control)
uses an inline style for display:block 🙁 */
display: flex !important;
    padding: .5em;
border: 0 none;
color: $contentTextColor;

.ui-messages-icon {
margin-right: .1em;
}
&, .ui-messages-close {
color: $headerIconTextColor;
~ ul {
padding-right: 1.4em;
}
.pi, .ui-messages-icon.pi {
font-size: 1.6em;
}
}
.ui-messages-summary {
margin-left: 0;
}
&.ui-messages-success {
background-color: #b7d8b7;
}
/*…other message severities… */
}

Comments Off on Using flex for PrimeNG message layout vs float/display:table-cell