Offset UI element when using Horiz Alignment: Right

Im adding a arrow to a dropdown element. It’s positioned to the right of it’s parent container. But I want to offset it some pixels to the left. How do I do this? I tried border but without luck.

Here’s my XML

<element type="DropDownList" style="dropDownWrapper">
	<attribute name="Name" value="ModelPreview" />
	<element type="BorderImage">
		<attribute name="Image Rect" value="194 3 206 11" />
		<attribute name="Min Size" value="12 8" />
		<attribute name="Max Size" value="12 8" />
		<attribute name="Horiz Alignment" value="Right" />
		<attribute name="Vert Alignment" value="Center" />
		<attribute name="Border" value="0 0 10 0" />
	</element>
	<element type="Window" internal="true" popup="true" style="none">
		<element type="ListView" internal="true" style="none">
			<element type="BorderImage" internal="true" style="none">
				<element internal="true" style="none">
					<element type="Text" style="dropDownOption">
						<attribute name="Text" value="Box" />
					</element>
				</element>
			</element>
		</element>
	</element>
</element>

If I remember just to change the Position. Btw I recommend you to use Urho editor instead of editing manually by xml. This way you will can see whats happening.

Changing position doesn’t seem to work when you use:

<attribute name="Horiz Alignment" value="Right" />

And since I want the arrow to always be aligned to the right no matter what the width of the dropdown is I ended up making the the Image Rect broader so that the right margin I wanter is included in the image.

<attribute name="Image Rect" value="144 3 164 16" />
<attribute name="Min Size" value="20 13" />
<attribute name="Max Size" value="20 13" />