Slider fields' label may overlap with the slider track if an ID not containing the string slider is assigned to the component.

To fix the issue, simply imbue the not-empty CSS class to the component during its initialization.

The following fiddle shows the issue whilst also proposes a fix that should be applied to the material-all-debug.js (and its minified counterpart) files.



The fix was based in the existing Ext.theme.material.form.field.Text (classic/theme-material/overrides/form/field/Text.js) specific code for text fields, which makes the label move or keep up when the field gets data. As we just want the label to be positioned above on load, we don't need it within an event, but just add the CSS class as we are initializing the component.

We were reported this issue from an user of Ext.NET who was trying our Ext.NET 5 (with Ext JS 7.0), and we confirmed the issue persisted in Ext JS 7.1. Notice this already has a fix that most likely could make it to 7.2, so why not?

We have logged an issue in our Ext.NET issue tracking system at GitHub under #1686 - Ext.Net.SliderField + Material theme: labels mispositioned