Search code examples
htmlcssangulardevextremedevextreme-angular

After upgrading devextreme to version 23.2, a pesudo class is generated everywhere, where I used <dxi-item title="">

<dx-tab-panel #tabPanel style="margin-top: 10px;">
      <dxi-item title="{{'header' | translate}}">
...rest of the code

DOM:

<div class="dx-item-content dx-tab-content">
   <div class="dx-tab-text">
      <span class="dx-tab-text-span">Header
         <span class="dx-tab-text-span-pseudo">Header</span>
      </span>
   </div>
</div>

This is how it is seen in browser:

enter image description here

I dont want the pseudo class to be generated because it is affecting my whole code and css.

PS: Please don't provide temporary solution like apply display: none; on that class, provide permanent solution.

Solution

  • You have missed to include the dev-extreme css. Please find below working sandbox version.

    I checked the code and the authors have itself included the CSS that prevents this issue! It must have been created for some screen reader purposes, it cannot be removed by configuration!

    dx.material.blue.light.css:12

    .dx-tab .dx-tab-text .dx-tab-text-span-pseudo {
    display: none;
}

    html

    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.3/css/dx.material.blue.light.css" />

    sandbox