[Solved] 18.2.8 - 19.1.X - Text boxes and number boxes at low resolutions (almost) entirely hides text

[briosheje]

TL;DR Be sure that the css you're using is not generated with the old devextreme theme builder, otherwise components may act in a weird way.

Steps to Reproduce:

1. Use any dx-text-box or number box with the clear button enabled.
2. Go to low resolutions like 1024x768
3. Use bootstrap and try to work with md-4 or md-3 or whatever.

Results You Received:

The text is almost entirely truncated (below screens targets 18.2.8).

Number:

Bigger number box:

Number box with spinners:

TextBox inside DropDownBox:

This is quite crucial, since most of the number boxes, at low resolutions, should be quite small in order to don't take unnecessary space. Previous versions of devextreme didn't suffer such an issue.

Results You Expected:

I would not expect the text to be truncated by the buttons overlay.

Environment Details:

Browsers tested:

• Chrome
• Firefox

[briosheje]

Update:

The issue seems caused by a strange padding of .dx-texteditor-input:

This looks weird, it seems the padding is calculated before the floating buttons, so there is an extra padding happening.

As a side note, I'm not using the dxButton buttons property, which seems to fix the issue in the official example given here: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Common/CustomTextEditorButtons/jQuery/Light/ where the padding seems to be calculated properly.

[briosheje]

Update: even by setting buttons: ['clear'] only, the padding is still 66, I can't really figure out what's happening, but I can't really foresee any cause.

The cause seems to be this:

I'm not exactly sure where it's coming from, but it's giving a huge padding from the right.

[briosheje]

Okay, I've found the issue: I'm using a custom CSS theme generated through the Theme Generator.

however, the theme was generated using an older version, since I'm using such theme since verison 18.1.7.

This css line is causing the issue. I will generate the theme again, I didn't think the theme generation would impact the component behaviors, hence the problem.

[briosheje]

Ok, I can confirm that updating the scss theme using the new ThemeBuilder fixes the issue:

[briosheje]

@DokaRus Perhaps, in the docs, you may want to mention that custom SCSS or whatever SCSS generated from the tool (either the old theme generator, either the new one) should be regenerated each major / minor release. In that case, the issue appeared in a minor (or patch, i guess) release, hence it was not that obvious to guess that the issue came from the scss.