ribbon several botons

[catpaw]

I have a ribbon but it has so many options that makes the ribbon create a second row

How can I adapt an horizontal scroll to avoid a second row?

thank you in advance

[jarry]

Wrap a scroll <div> around the tab body, the horizontal bar will display. Please refer to the code below:

Code:

<div class="easyui-ribbon" style="width:300px;">
<div title="Home">
<div style="width:800px"> <!--The scroll wrapper-->
<div class="ribbon-group">
<div class="ribbon-toolbar">
<a href="#" class="easyui-menubutton" data-options="name:'paste',iconCls:'icon-paste-large',iconAlign:'top',size:'large'">Paste</a>
</div>
<div class="ribbon-toolbar">
<a href="#" class="easyui-linkbutton" data-options="name:'cut',iconCls:'icon-cut',plain:true">Cut</a><br>
<a href="#" class="easyui-linkbutton" data-options="name:'copy',iconCls:'icon-copy',plain:true">Copy</a><br>
<a href="#" class="easyui-linkbutton" data-options="name:'format',iconCls:'icon-format',plain:true">Format</a>
</div>
<div class="ribbon-group-title">Clipboard</div>
</div>
<div class="ribbon-group-sep"></div>
<div class="ribbon-group">
<div class="ribbon-toolbar" style="width:200px"></div>
<div class="ribbon-group-title">other title</div>
</div>
<div class="ribbon-group-sep"></div>
</div>
</div>
</div>

[catpaw]

Hello Jarry, thanks for your answer

I should tell that my ribbon is set like this:

Code:

$('#rr').ribbon({
data:data
});

And data variable content all declarations of botons

In this case how can I modified the js/css ribon class to get the horizontal scroll?