How To : Prevent xe:dropDownButton Jumps on Next Line ?

How to prevent xe:dropDownButton jump on next line between regular buttons of your XPages ?

I mixed CSS properties and finally solved.

First of all, working on Latest ExtLib (853.20121217-1354) Notes 8.5.3 FP3 @ Domino 8.5.3 FP2 64bit

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xp:button
		value="Open"
		id="button1">
		<xp:eventHandler
			event="onclick"
			submit="true"
			refreshMode="complete">
			<xp:this.action><![CDATA[#{javascript:submit();}]]></xp:this.action>
		</xp:eventHandler>
	</xp:button>
	<xe:dropDownButton
		id="dropButton1">
		<xe:this.treeNodes>
			<xe:basicContainerNode
				label="Add Sub Form">
				<xe:this.children>
					<xe:basicLeafNode
						label="Sub Form 1"></xe:basicLeafNode>
					<xe:basicLeafNode
						label="Sub Form 2"></xe:basicLeafNode>
					<xe:basicLeafNode
						label="Sub Form 3"></xe:basicLeafNode>
					<xe:basicLeafNode
						label="Sub Form 4"></xe:basicLeafNode>
				</xe:this.children>
			</xe:basicContainerNode>
		</xe:this.treeNodes>
	</xe:dropDownButton>
	<xp:button
		value="Close"
		id="button2">
		<xp:eventHandler
			event="onclick"
			submit="true"
			refreshMode="complete">
			<xp:this.action><![CDATA[#{javascript:close();}]]></xp:this.action>
		</xp:eventHandler>
	</xp:button>
</xp:view>

Now Its looking like this :

After following update …. (for xe:dropDownButton -> style=”display:inline”)

	<xe:dropDownButton
		id="dropButton1"
		style="display:inline">
		<xe:this.treeNodes>
			<xe:basicContainerNode

Looks good 🙂

Happy coding …