The code below renders the words Data as "DataData" and Map as "MapMap". Im not able to change any style sheet if its a known issue but I culd override with a specific CSS class if that would work, please supply the exact details
Code@(Html.DevExtreme().TabPanel()
.Items(items => {
items.Add()
.Title("Data")
.Icon("detailslayout")
.Template(new TemplateName("datagrid-template"));
items.Add()
.Title("Map")
.Icon("globe")
.Template(new TemplateName("map-template"));
})
.AnimationEnabled(false)
.SwipeEnabled(true)
.Width("100%")
)
Hello Pete,
Thank you for the code snippet. I created a sample based on it. However, tab titles are rendered correctly on my end.
Could you please modify my sample to illustrate the issue in action so that I can analyze and debug it? If the issue occurs only in your real project, follow these steps to simplify the existing project:
Try isolating the problematic component(s). You can create a new project as a starting point. Often, real data is not necessary, and you can replace it with arbitrary arrays. If the same components work correctly in a sample, the issue is likely specific to other logic that you have on the page.
Create a backup of the problematic page/component and remove adjacent CSS, markup, components, props, and event handlers one by one to determine which one causes the issue.
Split the component's configuration code into two parts to make it simpler. Remove the first/second part and check if the issue persists. If so, repeat the same steps with the remaining code until the issue disappears.
The recommendations above will help you find the problematic area of your code and extract it into a standalone example. With this example, I'll be in a better position to research the issue.
Thanks as I said it must be a CSS issue, can you supply the CSS override please, it is a known issue in your help / support but as I said I cant alter the main CSS file, I could override if I knew what element it is??
dx-tab-text-span
dx-tab-text-span-pseudo
<span class="dx-tab-text-span">
"Piling Data"
<span class="dx-tab-text-span-pseudo">Piling Data</span>
</span>
This fixes it
.dx-tab-text-span-pseudo { display: none; }Hello Pete,
Manually hiding the duplicate text is a valid approach if modifying the main CSS file is not an option.
I'm happy to hear that you found a solution. Thank you for keeping me updated.