CODEWITHSUNDEEP
htmlcssangulardevextremedevextreme-angular
Dhairya
Dhairya

Reputation: 13

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.

Upvotes: 1

Views: 352

Answers (2)

Narendra Patel
Narendra Patel

Reputation: 317

mismatch of version that you used for devex theme css and you have in dextreme-angular in package.json

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56650

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

Upvotes: 2

Related Questions