Possibility to have different widths of modal windows

[jwag59]

I have created some modal windows but find it difficult to manage the layout when I have long labels for the textfield boxes. See the image below, where you can see the label "OS repo to be" is not fully shown. It would be good to have the antd 'width' option available so we can customize the width of the modal. Another option is to allow a label to wrap over multiple lines if needed.

[jwag59]

I appreciate that changing the modal layout to vertical has solved this immediate issue but this is not always the nicest layout. Is it not possible to expose the antd modal property 'width' which by default is set to 520 pixels. I don't know how your backend works but I had assumed if you expose this property then the antd frontend takes care of the rest (i.e. it adjusts the width of the modal). This would be my preferred solution. However, if for some reason this is not possible, at least can you expose a property where we can choose between either 'horizontal' or 'vertical' placement for the labels and content components rather than it being hard coded.

[jwag59]

I created a patch to enable specification of the modal width and also to specify a 'layout' mode of either vertical or horizontal. I would appreciate if you can consider adding this to adminui as I believe it gives a little more flexibility to Modal popups. 2 files are patched src/pages/pageParts/form.tsx and python/adminui/actions.py (Sorry I don't know how to use Git to contribute these in another way). Modal_with_layout_patches.zip

The use of the width is obvious. When defining ShowModalForm you can specify a width=XXX parameter to change the width of the modal popup window. The 2nd option available is layout='vertical' or 'horizontal'. In fact if anything other than 'vertical' is set or the layout parameter is not specified then 'horizontal' layout is used. Using layout='vertical' is slightly different to how vertical works now. Instead of arranging the Label field and associated Input field vertically, it simply wraps the Label text vertically rather than letting it disappear under the Input field if it is long. Therefore it is always fully visible though it can take up more vertical space. (But you can use width=XXX to increase the width of the Modal and avoid the Label text wrapping).

Note1: In form.tsx I used the original definition for the FormItem in the constant wrapModalInput. That means I used: <FormItem key={spec.uuid} label={spec.title} labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}> Note 2: The default width used is 520 pixels (which is antd's default)

This patch seems to work nicely except for one small problem. When using layout='vertical' the Labels lose the ending ':' character. At this point I don't know what causes this.

Screenshots might help This one shows some text of the 3rd Label is hidden by the input field. (None of the new options were used)

Same Modal with layout='vertical' specified

Same Modal with width=800 specified (Note: I have non-Form component (Switch) which doesn't line up perfectly but could be made to)

[jwag59]

Could you please review my patches and comment?