Styling a form (w2form) in w2ui

Question

I have a form in w2ui (https://w2ui.com/web/), exactly in the part of the forms (https://w2ui.com/web/docs/2.0/form).

I have the following form:

$().w2form({
        name   : 'myForm',
        fields : [
            { name: 'first_name', type: 'text', required: true },
            { name: 'last_name',  type: 'text', required: true },
            { name: 'comments',   type: 'text'}
        ]
});

What I am doing is that through a button, call a function to change the style of the form as follows:

w2ui.$("#myForm").style("height: 500px");

But I have not succeeded because it gives me an error: w2ui.$ is not a function

I have also tried the following:

$("#myForm").w2form().style("height: 500px");

score 1 · Answer 1 · answered Feb 03 '23 at 15:24

To programmatically change the height of a w2form, there are a few requirements that must be met:

the container must have a height (otherwise you wont see your form initially, as it has a height of 0)
the form must have autosize : false

Then you can change the height of the form's box as you want:

HTML

<div id="form" style="width: 700px; height: 200px"></div>

JS

let form = new w2form({
    box: '#form',
    name: 'form',
    autosize: false,
    header: 'Auto-Generated Form',
    fields: [
        { field: 'first_name', type: 'text', required: true,
            html: { label: 'First Name', attr: 'style="width: 300px"' }
        },
    ],
    record: {
        first_name: 'John',
        last_name: 'Doe'
    },
    actions: {
        ClickMe(event) {
             $(this.box).css({height: '300px', background: 'red'});
        },
    }
});

Fiddle: https://jsfiddle.net/aq6ehcb2/5/

Note: the correct JQuery function is css and not style.

Note: you want to change the height of the form's container. The form itself has no height property you can change.

Tested with w2ui 2.0.x (nightly) (1/16/2023, 8:50:38 AM)

Styling a form (w2form) in w2ui

1 Answers1