Title: ribbon several botons
Post by: catpaw on June 21, 2017, 11:14:01 AM
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
Title: Re: ribbon several botons
Post by: jarry on June 21, 2017, 08:51:53 PM
Wrap a scroll <div> around the tab body, the horizontal bar will display. Please refer to the code below: <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>
Title: Re: ribbon several botons
Post by: catpaw on June 22, 2017, 11:55:09 AM
Hello Jarry, thanks for your answer I should tell that my ribbon is set like this: $('#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? ???
|