Horizontally arrangement of fields in a tab

0

Hi, the only option I can think of is to create a “Choice list” field and enter YES/NO in it, then add javascript/CSS that will make the field horizontal, and you will have it horizontally.
The standard choice field does not have a horizontal option.

Hi Monica,
currently as Krystian pointed there is no native way to achieve what you want.
On the horizon I know that Webcon is working on giving more flexibility to designing the form - it might be possible in future, but I don't have any dates.

Hi Monica,

while Krystians answer refers to the options of a choice field you can achieve the desired effect for fields. In the advanced configuration of the group you can activate the "display horizontal" mode.


Best regards,
Daniel

Hi Daniel,
I thought about the same option;) but unfortunately groups cannot be nested :/ (Monika's tabs are already in the group)

Daniel, you can't set the choice fields to horizontal mode directly for choice, which is what Monika wanted, i.e. to be able to have YES/NO horizontally for choice, rather than several attributes in a group horizontally :)

Thanks for all the informations

@Krystian: Where do I have to place the javascript/CSS and how does it look?
Is it possible to hide a. and b. before the checkbox and can I set for example the first answer as default?

@Monica - Quickly added JS/CSS from gpt.
Add this to the form rule and apply it to the form opening - then it works for version 2023.
Change attchoose7 ID for yours.


(function () {
if (!document.getElementById("attchoose7-inline-css")) {
var css = `
#AttChoose7 .survey-choose__list{
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 16px !important;
align-items: center !important;
}
#AttChoose7 .survey-choose__list__item{
display: inline-flex !important;
align-items: center !important;
width: auto !important;
margin: 0 !important;
}
#AttChoose7 .survey-choose__list__item__text--key{
display: none !important;
}
`;
var style = document.createElement("style");
style.id = "attchoose7-inline-css";
style.textContent = css;
document.head.appendChild(style);
}

function setDefaultIfEmpty() {
var box = document.getElementById("AttChoose7");
if (!box) return false;

var radios = box.querySelectorAll('input[type="radio"]:not([disabled])');
if (!radios.length) return false;

var anyChecked = Array.prototype.some.call(radios, function (r) { return r.checked; });
if (!anyChecked) {
// click() odpala wewnętrzne handlery WEBCON
try { radios[0].click(); }
catch (e) {
radios[0].checked = true;
try { radios[0].dispatchEvent(new Event("change", { bubbles: true })); } catch (_) {}
}
}
return true;
}
function readyOnce() {
var box = document.getElementById("AttChoose7");
var list = box && box.querySelector(".survey-choose__list");
if (!list) return false;
setDefaultIfEmpty();
return true;
}

var tries = 0, maxTries = 50;
var iv = setInterval(function () {
if (readyOnce() || ++tries >= maxTries) clearInterval(iv);
}, 100);

var mo = new MutationObserver(function () { setDefaultIfEmpty(); });
mo.observe(document.body, { childList: true, subtree: true });
})();

Hello Krystian,

thank you for the JS/CSS unfortunately it seems not to work with the 2025/2 Version - I didn't get it to swith to horizontal.
Next week I'll try to ask someone in our compony that knows Java and CSS.

Have a nice weekend.

Best regards

Monica

Monica, bellow script working on 2025 version - add this on page load


(function () {
function applyAttChoose1() {
const root = document.getElementById("AttChoose1");
if (!root) return;


root.querySelectorAll(".survey-choose__list__item__text--key").forEach(span => {
span.style.display = "none";

});


const list = root.querySelector(".survey-choose__list");
if (list) {
list.style.setProperty("display", "flex", "important");
list.style.setProperty("flex-direction", "row", "important");
list.style.setProperty("gap", "20px", "important");
list.style.setProperty("align-items", "center", "important");
}
root.querySelectorAll(".survey-choose__list__item").forEach(it => {
it.style.display = "flex";
it.style.alignItems = "center";
});

const labels = Array.from(root.querySelectorAll("label.radio-button__wrapper"));
let yesLabel = labels.find(l => /^(?:\s*)yes(?:\s*)$/i.test((l.textContent || "").trim()))
|| labels.find(l => /tak/i.test((l.textContent || "")));
let yesInput = null;

if (yesLabel) {
const forId = yesLabel.getAttribute("for");
yesInput = forId ? document.getElementById(forId) : yesLabel.querySelector('input[type="radio"]');
} else {
yesInput = root.querySelector('input[type="radio"]');
}

if (yesInput) {
const groupName = yesInput.getAttribute("name") || "AttChoose1_Group";
root.querySelectorAll('input[type="radio"]').forEach(r => r.setAttribute("name", groupName));

if (!yesInput.checked) {
const lbl = root.querySelector(`label[for="${yesInput.id}"]`);
if (lbl) lbl.click();

yesInput.checked = true;
yesInput.dispatchEvent(new Event("input", { bubbles: true }));
yesInput.dispatchEvent(new Event("change", { bubbles: true }));
}
}
}

if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
applyAttChoose1();
setTimeout(applyAttChoose1, 100);
});
} else {
applyAttChoose1();
setTimeout(applyAttChoose1, 100);
}

const root = document.getElementById("AttChoose1");
if (root) {
const mo = new MutationObserver(() => applyAttChoose1());
mo.observe(root, { childList: true, subtree: true });
}
})();

Hi Krystian,

after several tries it works - I forgot, that I can't make it on page load because I show the fields on value change.
Thank you very much for your support :))

Greetings
Monica

Hi again,
I've got a new problem with this JavaScript.
When the second value of the list is choosen, then on page load the first value is set again.
I set the first value as default to be comfort for the user (it is in 95 % the right value) and on page load in the same step or going back to the forward step the second active choosen value is overwritten from the defalult (first value).
Is there a possibility not to overwrite the choosen value or must I delete the default value to solve this problem?