Elements layout documentation

#1

Hello! Is there any documentation regarding elements rendering? It looks like some elements have different behavior while rendering in Xd. E.g. Xd doesn’t render input type=“email”. Or input type=“checkbox” by default (in browsers) is rendered as inline element but in Xd it’s block element and I didn’t manage to change its flow using style=“display: inline” or float left. It’s always rendered as separate line. Wrapping checkbox into div with float left didn’t help either.

#2

@gdreyv, you could try using a container div set to ‘flex’ with ‘row’ flexDirection.

#3

Thanks for the idea! It partially works, I mean if I use layout like following:

<div style="display: flex;">
	<input type="checkbox" name="" id="checkbox_id" style="flex: row;">
	<label style="flex: row;" for="checkbox_id">Check me</label>
</div>

it’s rendered in a single line… but label doesn’t work, if I click on it checkbox is not getting checked. If I use that layout:

<label style="display: flex;">
	<input type="checkbox" name="" id="" style="flex: row;">
	<div style="flex: row;">Check me</div>
</label>

label works correctly but it’s rendered into two lines. Am I doing something wrong here?

#4

This is the function I use to create checkboxes, though not by html tags.
Hope it helps.

function createCheckBox(_placeholder, _width, _checked)
{
	let checkBoxGroup = document.createElement("label");
	checkBoxGroup.style.display = "flex";
	checkBoxGroup.style.flexDirection = "row";
	checkBoxGroup.style.alignItems = "center";
	
	let checkBox = document.createElement("input");
	checkBox.type = "checkbox";
	if (_checked)
	{
		checkBox.checked = true;
	}
	checkBoxGroup.appendChild(checkBox);
	
	let label = createLabel(_placeholder);
	label.style.marginLeft = 6;
	label.style.width = _width;
	checkBoxGroup.appendChild(label);
	
	return checkBoxGroup;
}
#5

Wow, I got it. Obviously I used flex instead of flex-flow. Final layout is:
<label style="display: flex; flex-flow: row;"> <input type="checkbox"> <span style="margin-left: -5px; padding-top: 4px;">Check me</span> </label>
So it works now, thanks for help!

1 Like
#6

Glad you got things figured out! Our docs indicate that XD uses block layout for all items, even those you would normally expect to be inline. This will be changing in the near future – we will have support for display:inline, but for now using flex is the best way to making items appear to be inline.

For aligning labels next to checkboxes, you should be able to add align-items: center to the label.

1 Like