Skip to content

Form: fields should not exceed group column width (T1326645) #33283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pharret31 merged 1 commit into from
Apr 15, 2026
+66 −22
Merged

Form: fields should not exceed group column width (T1326645) #33283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/devextreme-scss/scss/widgets/base/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
.dx-field-item-content {
vertical-align: top;

// TODO: form layout manager should not contains settings with checkbox/switch classes
// TODO: form layout manager should not contain settings with checkbox/switch classes
.dx-checkbox,
.dx-switch {
margin-top: 7px;
Expand All @@ -91,6 +91,7 @@
.dx-field-item-content,
.dx-field-item-content-wrapper {
width: 100%;
min-width: 0;
}
}

Expand Down
85 changes: 64 additions & 21 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.markup.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import responsiveBoxScreenMock from '../../helpers/responsiveBoxScreenMock.js';
import { isRenderer } from 'core/utils/type';
import config from 'core/config';
import 'ui/form';
import { FIELD_ITEM_CLASS,
import {
FORM_CLASS,
FORM_FIELD_ITEM_COL_CLASS,
FORM_GROUP_CLASS,
FIELD_ITEM_CLASS,
FIELD_ITEM_LABEL_CLASS,
FIELD_ITEM_CONTENT_CLASS,
FIELD_ITEM_LABEL_CONTENT_CLASS,
FORM_GROUP_CAPTION_CLASS,
Expand All @@ -24,6 +26,9 @@ import ValidationEngine from 'ui/validation_engine';
import 'ui/text_area';
import 'ui/radio_group';
import 'ui/switch';
import 'ui/tag_box';

import 'fluent_blue_light.css!';

const FORM_GROUP_CONTENT_CLASS = 'dx-form-group-content';
const FORM_GROUP_CUSTOM_CAPTION_CLASS = 'dx-form-group-custom-caption';
Expand Down Expand Up @@ -142,7 +147,7 @@ QUnit.module('Form', () => {
assert.equal(rootLayoutManager.option('width'), 100, 'Correct width');
});

test('Form isn\'t refresh on dimension changed if colCount is auto', function(assert) {
test('Form should not refresh on dimension changed if colCount is auto', function(assert) {
const $formContainer = $('#form').dxForm({
colCount: 'auto',
items: [
Expand All @@ -157,10 +162,10 @@ QUnit.module('Form', () => {

resizeCallbacks.fire();

assert.equal(refreshStub.callCount, 0, 'don\'t refresh on resize if colCount is auto');
assert.equal(refreshStub.callCount, 0, 'did not refresh on resize if colCount is auto');
});

test('Form doesn\'t refresh on dimension changed if colCount is not auto', function(assert) {
test('Form should not refresh on dimension changed if colCount is not auto', function(assert) {
const $formContainer = $('#form').dxForm({
items: [
{
Expand All @@ -175,7 +180,7 @@ QUnit.module('Form', () => {

resizeCallbacks.fire();

assert.equal(refreshStub.callCount, 0, 'do not refresh on resize if colCount isn\'t auto');
assert.equal(refreshStub.callCount, 0, 'did not refresh on resize if colCount is not auto');
});

test('Render read only form', function(assert) {
Expand Down Expand Up @@ -217,7 +222,7 @@ QUnit.module('Form', () => {
assert.equal($fieldItems.length, 5, '4 simple items + 1 group item');
});

test('\'readOnly\' is changed in inner components on optionChanged', function(assert) {
test('readOnly option is changed in inner components on optionChanged', function(assert) {
const $formContainer = $('#form').dxForm({
items: [
{
Expand All @@ -227,7 +232,7 @@ QUnit.module('Form', () => {
]
});

assert.notOk($formContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass(READONLY_STATE_CLASS), 'editor isn\'t read only');
assert.notOk($formContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass(READONLY_STATE_CLASS), 'editor is not read only');

$formContainer.dxForm('instance').option('readOnly', true);

Expand All @@ -250,7 +255,7 @@ QUnit.module('Form', () => {
assert.ok($testContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass(READONLY_STATE_CLASS), 'editor is read only');
});

test('\'disable\' is changed in inner components on optionChanged', function(assert) {
test('disable option is changed in inner components on optionChanged', function(assert) {
const $formContainer = $('#form').dxForm({
items: [
{
Expand All @@ -265,7 +270,7 @@ QUnit.module('Form', () => {

$formContainer.dxForm('instance').option('disabled', false);

assert.notOk($formContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass('dx-state-disabled'), 'editor isn\'t disabled');
assert.notOk($formContainer.find(`.${FIELD_ITEM_CLASS} .${TEXTEDITOR_CLASS}`).hasClass('dx-state-disabled'), 'editor is not disabled');
});

test('Customize item event', function(assert) {
Expand Down Expand Up @@ -335,7 +340,7 @@ QUnit.module('Form', () => {
assert.deepEqual($testContainer.find('.dx-layout-manager').dxLayoutManager('instance').option('layoutData'), { FamousPirate: 'John Morgan' }, 'Correct formData');
});

test('Check data at render with items and change widget\'s value', function(assert) {
test('Check data at render with items and change widget value', function(assert) {
const $testContainer = $('#form');

$testContainer.dxForm({
Expand All @@ -348,7 +353,7 @@ QUnit.module('Form', () => {
assert.deepEqual($testContainer.dxForm('instance').option('formData'), { FamousPirate: 'John Morgan', FamousDetective: 'Sherlock Holmes' }, 'Correct formData');
});

test('Change of editor\'s value changing \'formData\' option', function(assert) {
test('Change of editor value changing formData option', function(assert) {
const $testContainer = $('#form');

$testContainer.dxForm({
Expand All @@ -360,7 +365,7 @@ QUnit.module('Form', () => {
assert.deepEqual($testContainer.dxForm('instance').option('formData'), { FamousPirate: 'Cpt. Jack Sparrow' }, 'Correct formData');
});

test('Update of editor\'s value when formOption is changed and items is defined', function(assert) {
test('Update of editor value when formOption is changed and items is defined', function(assert) {
const $testContainer = $('#form');
const textBoxes = [];

Expand Down Expand Up @@ -710,7 +715,7 @@ QUnit.module('Form', () => {
assert.equal($editors.eq(1).dxTextBox('option', 'validationBoundary'), undefined);
});

test('button item should have a Form\'s validation group by default', function(assert) {
test('button item should have a Form validation group by default', function(assert) {
const $testContainer = $('#form');
const form = $testContainer.dxForm({
items: [{
Expand Down Expand Up @@ -791,6 +796,44 @@ QUnit.module('Form', () => {

assert.equal(templateStub.getCall(0).args[0].name, undefined, 'name argument');
});

test('TagBox should not exceed group column width when many items are selected (T1326645)', function(assert) {
const $form = $('#form').width(600);

$form.dxForm({
labelLocation: 'left',
formData: {
tags: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
items: [
{
itemType: 'group',
items: [{
dataField: 'tags',
editorType: 'dxTagBox',
editorOptions: {
items: Array.from({ length: 10 }, (_, i) => ({
id: i + 1,
name: `Long item name ${i + 1}`,
})),
displayExpr: 'name',
valueExpr: 'id',
multiline: false,
},
}],
},
],
});

const $group = $form.find(`.${FORM_GROUP_CLASS}`).first();
const $label = $group.find(`.${FIELD_ITEM_LABEL_CLASS}`).first();
const $content = $group.find(`.${FIELD_ITEM_CONTENT_CLASS}`).first();

const groupWidth = $group.outerWidth();
const totalItemWidth = $label.outerWidth() + $content.outerWidth();

assert.roughEqual(totalItemWidth, groupWidth, 0.1, `field item content width (${totalItemWidth}) should not exceed group width (${groupWidth})`);
});
});

QUnit.module(`"${TOGGLE_CONTROLS_PADDING_CLASS}" class`, ()=>{
Expand Down Expand Up @@ -990,7 +1033,7 @@ QUnit.module('Validation group', () => {

assert.equal($validator.length, 1, 'validators count');
assert.equal(validator.option('validationGroup'), form, 'validation group of the validator');
assert.ok(ValidationEngine.getGroupConfig(form), 'form\'s validation group in the validation engine');
assert.ok(ValidationEngine.getGroupConfig(form), 'form validation group in the validation engine');
});

test('Set { items: [{dataField: name, isRequired: true}], showValidationSummary: true }', function(assert) {
Expand All @@ -1016,7 +1059,7 @@ QUnit.module('Validation group', () => {

assert.equal($validator.length, 1, 'validators count');
assert.equal(validator.option('validationGroup'), 'Test', 'validation group of the validator');
assert.ok(ValidationEngine.getGroupConfig('Test'), 'form\'s validation group in the validation engine');
assert.ok(ValidationEngine.getGroupConfig('Test'), 'form validation group in the validation engine');
});

test('Set { items: [{dataField: name, isRequired: true}], validationGroup: Test, showValidationSummary: true }', function(assert) {
Expand All @@ -1040,7 +1083,7 @@ QUnit.module('Validation group', () => {
const $validator = $formContainer.find(`.${VALIDATOR_CLASS}`);

assert.equal($validator.length, 0, 'validators count');
assert.ok(ValidationEngine.getGroupConfig(form), 'form\'s validation group in the validation engine');
assert.ok(ValidationEngine.getGroupConfig(form), 'form validation group in the validation engine');
});

test('Set { items: [{dataField: name}], showValidationSummary: true }', function(assert) {
Expand All @@ -1064,7 +1107,7 @@ QUnit.module('Validation group', () => {
const $validator = $formContainer.find(`.${VALIDATOR_CLASS}`);

assert.equal($validator.length, 0, 'validators count');
assert.ok(ValidationEngine.getGroupConfig('Test'), 'form\'s validation group in the validation engine');
assert.ok(ValidationEngine.getGroupConfig('Test'), 'form validation group in the validation engine');
});

test('Set { items: [{dataField: name}], validationGroup: Test, showValidationSummary: true }', function(assert) {
Expand Down Expand Up @@ -1270,7 +1313,7 @@ QUnit.module('Grouping', () => {
assert.equal($captions.eq(0).text(), 'Personal');
});

test('helpText element didn\'t render for group item', function(assert) {
test('helpText element should not be rendered for group item', function(assert) {
const $formContainer = $('#form').dxForm({
formData: {
firstName: 'John'
Expand Down Expand Up @@ -1328,7 +1371,7 @@ QUnit.module('Grouping', () => {

assert.equal($groups.length, 2, '2 groups rendered');
assert.equal($groups.eq(1).find('.template-biography').length, 1, 'We have template content');
assert.equal($groups.eq(1).find('.template-biography').text(), 'bla-bla-bla', 'Template\'s content has correct data');
assert.equal($groups.eq(1).find('.template-biography').text(), 'bla-bla-bla', 'Template content has correct data');
});

test('Simple Item labelTemplate', function(assert) {
Expand Down Expand Up @@ -1363,7 +1406,7 @@ QUnit.module('Grouping', () => {

assert.strictEqual($groups.length, 2, '2 groups rendered');
assert.strictEqual($groups.eq(0).find(`.${labelClass}`).length, 1, 'label template content');
assert.strictEqual($groups.eq(0).find(`.${labelClass}`).text(), 'First Name: ?', 'Labels\'s content has correct data');
assert.strictEqual($groups.eq(0).find(`.${labelClass}`).text(), 'First Name: ?', 'Label content has correct data');
});

QUnit.module('Caption template', () => {
Expand Down Expand Up @@ -1497,7 +1540,7 @@ QUnit.module('Grouping', () => {
]
});

assert.equal(templateOwnerComponent, 'dxForm', 'Template\'s data.component is \'dxForm\'');
assert.equal(templateOwnerComponent, 'dxForm', 'Template data.component is dxForm');
});

test('Recursive grouping', function(assert) {
Expand Down
Loading