How i can put struts 2 elements horizontally?

Question

I'm working with Struts 2 + JqueryUI Struts2 Plugin and I want to put some items next to each other horizontally.

In struts2 form item all the elements are vertical ...

This is my code:

<s:form action="test" theme="simple">
<sj:a id="ajaxlink" onclick="disminuyeBloque()" button="true" buttonIcon="ui-icon-minus" cssStyle="height:20px"/>
<sj:textfield id="tamannobloque"  name="tamannobloque" readonly="true" size="2" />
<sj:a id="ajaxlinkminus" onclick="aumentaBloque()" button="true" buttonIcon="ui-icon-plus" cssStyle="height:20px"/>
<sj:slider id="echo4" name="slider" label="Echo" value="{3, 7}" min="1" max="10" onCompleteTopics="sliderRangeStop" cssStyle="margin: 10px; width:20%"/>
</s:form>

I want the slider appears next the last button (a plus button)

Answer 1

You can try to set the form element's parentTheme to css_xhtml and wrap elements on the same line with div and apply your style afterwards.

something like

<s:form action="test" theme="simple">
<div>
<sj:a id="ajaxlink" onclick="disminuyeBloque()" button="true" buttonIcon="ui-icon-minus" cssStyle="height:20px"/>
<sj:textfield id="tamannobloque"  name="tamannobloque" readonly="true" size="2" parentTheme="css_xhtml"/>
</div>
<div>
<sj:a id="ajaxlinkminus" onclick="aumentaBloque()" button="true" buttonIcon="ui-icon-plus" cssStyle="height:20px"/>
<sj:slider id="echo4" name="slider" label="Echo" value="{3, 7}" min="1" max="10" onCompleteTopics="sliderRangeStop" cssStyle="margin: 10px; width:20%" parentTheme="css_xhtml"/>
</div>
</s:form>

Answer 2

If you want to print the slider inline you need to use the display:inline-block property and give the slider a certain width.

In your CSS:

#echo4 {
    display: inline-block;
    width: 100px;
}

You can see a demo here.

Answer 3

You can set the display property of the slider to inline ,

<style>
#echo4    
{
display:inline;
}
</style>