Size zetting field

Joomla 5.2.0, PHP 8.2, Visforms 5.1.2 (incl subscription)
I'm using visforms for a long time but some strange thing happend. In J5 I'm using a standard form (all standard settings) and the size of the displayed files is about 20 characters. Which (css?) setting is needed to make it 40 characters?
 

Hello ejbm,

Thank you for the version information.

After which change did these 'strange things' first occur?
Or to put it another way:
What did you do before, what was the environment in which the forms were displayed as expected?

Did you perhaps switch from Joomla 4 to J5 and are now using a new template in J5?
Have you also chosen the right layout UI framework (see below)?

With a link to the form, however, analyzing the cause should be a small task for me.
You can see which CSS setting is used in the web browser developer tools.
Without a link to the form, I can't say anything about that.

Have you chosen the right layout UI framework?
I recommend the following sections in the documentation as an introduction to layout configuration and layout issues.
Layout configuration:
docs.joomla-4.visforms.vi-solutions.de/e...ayout-configuration/
Subscription layouts:
docs.joomla-4.visforms.vi-solutions.de/e...ubscription/layouts/
Customize the form layout with CSS:
docs.joomla-4.visforms.vi-solutions.de/e...orm-layout-with-css/

The basic layout questions and settings are:
- which UI framework your template uses,
- which UI framework is set in Visforms (form configuration, tab 'Advanced', group 'Layout'),
which sub-layout is set in Visforms, if any (form configuration, tab 'Advanced', group 'Layout').

It is the task of the template to control the display and also to react responsively.
Optimal results are achieved when the template used implements the UI framework completely and cleanly.

Summary: The UI framework setting in Visforms must match the UI framework your template uses.

Kind regards, Ingmar

www.eftinbrabant.nl/contact-met-eft-in-brabant.html
So far I've used J4 and J5. Both worked perfectly. This site has been created recently with all the available updates.
Checked the ui framework version: none / bootstrap 5 and UIkit3 in Visform, tried all. doesn't change anything.
The UIframework version of J5 I cant find at the moment.
regards
Mark

checked the framework of the template. It should be Bootstrap compatible. I'm using Nicepage - latest version- for building the websites. (J4 and J5)
If you want: I expected something like
www.impactopleidingen.nl/inschrijven/inschrijven-workshop.html
(J4 website)
www.impact-karma.nl/informatie-gesprek.html
(J5 website 5.1.4). In both cases the UIframework Visforms is set to None.
Regards Mark

Hello Mark,

The reason is very simple.
This is not a Bootstrap template.

The Bootstrap layout implements the CSS classes .col and .row and .form-control.
These 3 classes are used to control whether an input takes up the width set in the configuration.
The CSS class .col in conjunction with the Bootstrap CSS width classes .form-control on the input then ensure that the inputs have the correct width.

As these CSS implementations are completely missing in your case, there is ultimately no size rule for the input element.
It falls back to the browser standard.
That is, the inputs are narrow.

The reason is therefore in the template and another suitable compatible template is the solution.

Best regards, Ingmar

Hello Mark,

If you are generally happy with the look of the template and just want to customize the width of the inputs, then you can definitely do that.
You can do that with a bit of custom CSS.
But the implementation can be a bit more complex until everything looks really nice in the end.

You can achieve individual changes with your own custom CSS/JavaScript and the Visforms 'Frontend Webassets'.
Frontend Web Assets:
docs.joomla-4.visforms.vi-solutions.de/e...-frontend-webassets/
All settings are made in the form:
docs.joomla-4.visforms.vi-solutions.de/e...are-made-in-the-form

Best regards, Ingmar