Title: Horizontal scroll in EasyUI Ribbon Extension
Post by: WizPS on December 15, 2020, 12:12:38 PM
I'm using the EasyUI Ribbon extension and like it a lot. However I'm missing a horizontal scroll when the ribbon grows outside the viewing browser window.
Is there a possibility to get the same nice vertical scroll as in the tabs plugin when that grows outside?
Title: Re: Vertical scroll in EasyUI Ribbon Extension
Post by: jarry on December 17, 2020, 10:26:53 PM
Please show an example to demonstrate your issue.
Title: Re: Horizontal scroll in EasyUI Ribbon Extension
Post by: WizPS on December 19, 2020, 09:06:26 AM
Absolutely, Here's a code example <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ribbon - jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="ribbon.css">
<link rel="stylesheet" type="text/css" href="ribbon-icon.css">
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.ribbon.js"></script>
<script type="text/javascript">
var data = {
selected:0,
tabs:[{
title:'Home',
groups:[{
title:'Clipboard',
tools:[{
type:'splitbutton',
name:'paste',
text:'Paste',
iconCls:'icon-paste-large',
iconAlign:'top',
size:'large',
menuItems:[{
name:'paste',
text:'Paste',
iconCls:'icon-paste'
},{
name:'paste-special',
text:'Paste Special...',
iconCls:'icon-paste'
}]
},{
type:'toolbar',
dir:'v',
tools:[{
name:'cut',
text:'Cut',
iconCls:'icon-cut'
},{
name:'copy',
text:'Copy',
iconCls:'icon-copy'
},{
name:'format',
text:'Format',
iconCls:'icon-format'
}]
}]
},{
title:'Font',
tools:[{
type:'toolbar',
tools:[{
type:'combobox',
valueField:'text',
textField:'text',
data:[{text:'Arial',selected:true},{text:'Century'},{text:'Tahoma'}],
width:100,
panelHeight:'auto',
editable:false
},{
type:'combobox',
valueField:'text',
textField:'text',
data:[{text:'8'},{text:'12',selected:true},{text:'14'}],
width:60,
panelHeight:'auto',
editable:false
}]
},{
type:'toolbar',
style:{marginLeft:'5px'},
tools:[{
name:'increase-font',
iconCls:'icon-increase-font'
},{
name:'decrease-font',
iconCls:'icon-decrease-font'
}]
},{
type:'toolbar',
style:{clear:'both',marginTop:'2px'},
tools:[{
name:'bold',
iconCls:'icon-bold',
toggle:true
},{
name:'italic',
iconCls:'icon-italic',
toggle:true
},{
name:'underline',
iconCls:'icon-underline',
toggle:true
},{
name:'strikethrough',
iconCls:'icon-strikethrough',
toggle:true
},{
name:'superscript',
iconCls:'icon-superscript',
toggle:true
},{
name:'subscript',
iconCls:'icon-subscript',
toggle:true
}]
},{
type:'toolbar',
style:{clear:'both'},
tools:[{
name:'case-font',
iconCls:'icon-case-font'
},{
name:'grow-font',
iconCls:'icon-grow-font'
},{
name:'shrink-font',
iconCls:'icon-shrink-font'
}]
}]
},{
title:'Paragraph',
dir:'v',
tools:[{
type:'toolbar',
tools:[{
name:'slign-left',
iconCls:'icon-align-left',
toggle:true,
group:'p1'
},{
name:'align-center',
iconCls:'icon-align-center',
toggle:true,
group:'p1'
},{
name:'align-right',
iconCls:'icon-align-right',
toggle:true,
group:'p1'
},{
name:'align-justify',
iconCls:'icon-align-justify',
toggle:true,
group:'p1'
}]
},{
type:'toolbar',
style:{marginTop:'2px'},
tools:[{
name:'bullets',
iconCls:'icon-bullets'
},{
name:'numbers',
iconCls:'icon-numbers'
}]
}]
},{
title:'Editing',
dir:'v',
tools:[{
type:'splitbutton',
name:'find',
text:'Find',
iconCls:'icon-find',
menuItems:[{
name:'find',
text:'Find',
iconCls:'icon-find'
},{
name:'go',
text:'Go to...',
iconCls:'icon-go'
}]
},{
name:'replace',
text:'Replace',
iconCls:'icon-replace'
},{
type:'menubutton',
name:'select',
text:'Select',
iconCls:'icon-select',
menuItems:[{
name:'selectall',
text:'Select All',
iconCls:'icon-selectall'
},{
name:'select-object',
text:'Select Objects',
iconCls:'icon-select'
}]
}]
}]
},{
title:'Insert',
groups:[{
title:'Table',
tools:[{
type:'menubutton',
name:'table',
text:'Table',
iconCls:'icon-table-large',
iconAlign:'top',
size:'large'
}]
},{
title:'Illustrations',
tools:[{
name:'picture',
text:'Picture',
iconCls:'icon-picture-large',
iconAlign:'top',
size:'large'
},{
name:'clipart',
text:'Clip Art',
iconCls:'icon-clipart-large',
iconAlign:'top',
size:'large'
},{
type:'menubutton',
name:'shapes',
text:'Shapes',
iconCls:'icon-shapes-large',
iconAlign:'top',
size:'large'
},{
name:'smartart',
text:'SmartArt',
iconCls:'icon-smartart-large',
iconAlign:'top',
size:'large'
},{
name:'chart',
text:'Chart',
iconCls:'icon-chart-large',
iconAlign:'top',
size:'large'
}]
}]
}]
};
$(function(){
$('#rr').ribbon({
data:data
});
});
</script>
</head>
<body>
<div id="rr" style="width:100%;">
</div>
</body>
</html> in witch I have with of ribbon set to 100% so it always on top as a nice ribbon. Pic 1 and 2 shows wide browser where ribbon follows the with nicely. In Pic 3 the ribbon breaks into 2 rows witch is what i want to prevent. In Pic 4 I simulate how the tabs plugin works with adding right and left scrolling option. A browser scroll might work but also that makes a line break so I have to scroll both horizontal and vertical. horizontal is OK but vertical not. Hope I managed to explain better now and sorry for being unclear earlier.
Title: Re: Horizontal scroll in EasyUI Ribbon Extension
Post by: jarry on December 19, 2020, 08:32:39 PM
Please try to download the updated ribbon extension from https://www.jeasyui.com/extension/ribbon.php
Title: Re: Horizontal scroll in EasyUI Ribbon Extension
Post by: WizPS on December 22, 2020, 08:51:48 AM
Yes, that works fine. Thanks a lot and Happy Holidays!
|