Deleting a variant

[Initiostar]

@Acorn, I tried the code in a separate document (and I think I have correctly followed the instructions) > Login.xar

I used the OP variant sizes, Mobile, Main and Wide (variants 0,1, & 2); the widget code is in the wide placeholder. The widget displays in the wide view, but not in the others; I did see there was ::before event but no idea whether this has any bearing.

The widget itself looks like it has some formatting issues and some others too, but I would still have thought it should show up in the other variants. It could of course be operator error on my behalf.

Any thoughts?

[Acorn]

I think with the back and forward, we have all fallen foul of Copy & Paste and Xara's Smart Quotes!

Even in my code above (<span id =”variant1”>), it should be: <span id ="variant1">
as should the other two Placeholders: <span id ="variant0"> & <span id ="variant2">.
Correct these and all works.

here is a cut-down version with the simplest in input boxes: JS - demo - Variant Form Handling.xar
When you add something to it, it appears on all page widths as it is the same form.

@h3f - your provided code is riddled with errors.
I am unable to correct those.
I get a spinner for very long periods before the form appears; in that time, hundred of errors.
Now, it might be, the form will not Preview properly and is OK published, but I doubt it.

For any tyros:

• You replace the bold red <input id="random"> with your form display code.
• You create as many Variants as you like - you note the rightmost widths for each variant - this allows you to change the bold red array entries for bkpt.
• Whatever browser width you start from, the website code determines which variant you are in and moves thw #wrapper <div> and its contents (your form) to the right variant.
• Viewing and data entry is seamless.

Acorn

[Initiostar]

Thanks Acorn - I had the Xara "smart quotes", reverted to Notepad++ and that fixed that issue.

The widget objects to the window being dynamically resized (as in squeezing a desktop browser) and does throw out lots of errors. However when I resize the browser and refresh it thereafter (f5) it does work, albeit with lots of errors.



I have the same issue with the Jotform test, but it appears to correctly render on any specific device. It is also true (in the Jotform test) that if I rotate the device (say mobile landscape) it appears to retain the inputs already completed. https://initiostar.co.uk/demo/formtest/

With the Jotform test the errors only relate to the SameSite attribute not being set.