Cool add-on, I'm having trouble setting the width. If I do: SuperLongField

Directory SuperFields
1

Cool add-on, I’m having trouble setting the width. If I do:

SuperLongField sf = new SuperLongField();
sf.setWidth(“200px”);

…this doesn’t have any effect.

The CSS is shown below. When I manually change the width of super-text-field to “200px”, I get the results I want. How can I access the width of super-text-field via the API?


<super-long-field style="width: 200px;">
	<super-text-field class="belongs-to-superlongfield" style="width:100%">
2

Hello Gabe, and thank you for using my add-on :)

First of all, the inner field is by default sized to 100% (as inline style, not easily possible to overwrite it), so it takes the entire space allowed inside the superfield. It should be enough to setWidth() of the superfield. More advanced styling is of course possible, please see ticket #126 and code in demo-v14/frontend/styles/super-number-field-styles.css (requires @CssImport with themeFor="vaadin-text-field").

Second, 200px is apparently pretty close to the default out-of-the-box size, so you may not see any difference. Trying out more extreme values seems to work (see screenshot, with setWidth("20px") and tested with Firefox).

Finally, 200 px (notice the space between number and unit) seems to have no effect - it fails silently and just renders component as is. This seems to be a general Vaadin bug.

If there are still issues, please submit a bug ticket to the repository and ideally include a code snippet that reproduces the issue.
18516752.png

3

Hi Miki,
Sorry for the slow response. Problem seems to arise when adding it to a FormLayout with addFormItem. Below is a code sample + screen shot.

Thoughts?


String width = "400px";
		cbState.setWidth(width);
		cbCategory.setWidth(width);
		cbClassCode.setWidth(width);
		/*sifPayroll is a SuperLongField*/
		sifPayroll.setWidth(width); 
		ifFte.setWidth(width);
		ifPte.setWidth(width);
		
		form.addFormItem(cbState, "State");
		form.addFormItem(cbCategory, "Category");
		form.addFormItem(ifFte, "Full Time Employees");
		form.addFormItem(ifPte, "Part Time Employees");
		form.addFormItem(sifPayroll, "Payroll");
		form.addFormItem(cbClassCode, "Class Code");

18521892.png

4

Hi Gabe, and thanks for narrowing the problem.

I was able to reproduce it and there is [an issue for it in GitHub]
(https://github.com/vaadin-miki/super-fields/issues/270).

It seems to me that this is related to the fact that number fields are CustomFields rather than TextFields, and there is probably some method call that is not delegated to the inner text field. But it is just a guess - another option may be the styling combined with shadow dom, which is a nightmare.

Anyway, I hope to fix the issue with the next release. It is planned for the end of March, but I hope it happens still in February ;)

5

Hello Gabe!

Just to let you know, the issue has been (hopefully fixed) and will be present in the next release. The code is already in the development branch, so if you are willing to try the “bleeding edge” version, feel free to grab it and try it out. Any feedback is more than welcome!