Elements layout documentation

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.

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

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?

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;
}

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

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

Sorry, but it still or again doesn’t work with xd 21:

<label class="row">
  <input type="checkbox" checked="true"/>
  <span class="checkrow">Facelift – Blog Hero Card & Dark Sub</span>
</label>
.checkrow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

It looks like white-space style is broken now.
image

Labels in UXP 3.1 use inline-flex layout to try to more closely align with the web. It’s not a perfect match for the web behavior (where the text would wrap instead), but it’s closer than what we did previously. Future versions of UXP will lay checkboxes out with inline layout by default, so this is an interim step to that.

To drop ensure flex wrapping doesn’t occur in your case, add flex-wrap: nowrap. Note that you may see other visual issues that you’ll have to address if the checkbox is forced into a container smaller than that the checkbox needs, since the text itself may wrap.

@stevekwak – I’m pushing a change to the UXP 2-3 migration that includes this info. Can you update the UI reference page for checkboxes to include this?