StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to make horizontal scroll bar visible only when it is needed?
text
Body
copied!<p>I want vertical scroll bar and horizontal scroll bars only when they are needed(for eg. screen is minimized), so I wrapped my main panel into a panel having <strong>autoScroll</strong> property true and that in turn into a panel having <strong>layout: fit</strong> . Now the vertical scroll bar appears only when needed but horizontal scroll bar doesn't appear. </p> <p>What can be the way to make the <strong>horizontal scroll bar</strong> too appear when needed? Any help would be appreciated. </p> <p>Please find my code below: </p> <pre><code>Ext.define('ORT.view.survey.wizard.StepTemp3', { extend: 'Ext.form.Panel', alias : 'widget.surveywizardsteptemp3', title: 'Survey Wizard - Step temp 3', id : 'surveyWizardtemp3', layout:'fit', items:[{ xtype:'panel', autoScroll:true, border:false, items:[{ xtype:'panel', border:false, layout: { type: 'vbox', align:'stretch' }, items:[{ border: false, margin:10, layout:{ type: 'hbox', align: 'top', pack: 'start' }, defaults:{margins:'0 10 0 0'}, items:[{ flex:1, border: false, cls: 'blueSurveyBox', layout:{ type:'vbox', align: 'stretch', padding:'10 5 0 10' }, defaults:{margins: '0 0 15 0'}, items:[{ border: false, layout:{ type:'hbox', align:'top' }, items:[{ border: false, xtype:'label', text:'Survey Title - ', cls: 'labelBig', width: 85 },{ border: false, xtype:'label', text:'Popular Radio Station', cls: 'labelBigBold', }] },{ border: false, layout:{ type:'hbox', align:'top' }, items:[{ border: false, xtype:'label', text:'Category - ', cls: 'labelBig', width: 85 },{ border: false, xtype:'label', text:'Community', cls: 'labelBigBold', }] }] },{ flex:1, border: false, cls: 'blueSurveyBox', layout:{ type:'hbox', align:'top', pack:'center' }, items:[{ flex:1, border: false, layout:{ type:'hbox', padding:'10 10 15 10' }, defaults:{margin:'0 10 0 0'}, items:[{ border:false, layout:{ type:'vbox' }, items:[{ xtype:'label', text:'Your Logo - ' },{ xtype:'label', text:'(Dimensions - 100 x 100 px, File Type - .jpg,.gif,.png)', cls: 'descText', width:170 }] },{ xtype:'button', text:'Upload Logo', scale: 'medium', iconCls:'icon-uploadBtn', width: 120 },{ xtype:'image', src: 'images/admin_users.png', autoEl: 'div', renderTo: Ext.getBody(), width: 120 }] }] }] },{ border:false, margin:'0 10 10 10', cls: 'blueSurveyBox', layout:{ type:'vbox', align:'stretch', padding:'10 10 0 10' }, items:[{ xtype:'label', text:'Survey Layout Template', cls:'subTitle' },{ xtype:'panel', autoScroll: true, items:[{ border:false, layout:{ type:'hbox' }, items:[{ xtype: 'dataview', store: 'SearchedGraphics', tpl: [ '<tpl for=".">', '<div class="thumb-wrap" id="{name:stripTags}">', '<div class="thumb"><table><tr><td><img class="img" src="{url}" title="{name:htmlEncode}"></td></tr></table></div>', '<span class="x-editable">{shortName:htmlEncode}</span>', '</div>', '</tpl>', '<div class="x-clear"></div>' ], multiSelect: true, height: 100, trackOver: true, overItemCls: 'x-item-over', itemSelector: 'div.thumb-wrap', emptyText: ORT.Utility.GridEmptyText, prepareData: function(data) { Ext.apply(data, { shortName: Ext.util.Format.ellipsis(data.name, 15), sizeString: Ext.util.Format.fileSize(data.size), dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a") }); return data; }}] }] }] },{ border: false, margin:'0 10 10 10', cls: 'blueSurveyBox', layout:{ type:'vbox', align: 'stretch', padding:'10 10 0 10' }, defaults:{margins:'0 5 10 5'}, items:[{ border: false, layout:{ type:'vbox', align:'top' }, items:[{ xtype:'label', text:'Survey Header Attributes', cls:'subTitle' },{ border: false, layout:{ type:'hbox', align:'top', pack:'center' }, defaults:{margins:'5 10 10 0'}, items:[{ xtype:'textfield', fieldLabel:'Title', name: 'title', labelWidth: 60, width:250 },{ xtype:'checkbox', boxLabel:'Display Date/Time', boxLabelAlign:'before', margin:'0 0 0 20' },{ xtype:'combobox', width:100 }] },{ border:false, layout:{ type:'hbox', align:'top' }, defaults:{margins:'0 20 0 0'}, items:[{ xtype:'combobox', fieldLabel:'Font', labelWidth:60, width:250, },{ border: false, layout:{ type:'hbox', align:'top', pack:'end' }, defaults:{margin:'0 5 5 10'}, items:[{ xtype:'combobox', fieldLabel:'Font Size', labelWidth:80, width:200 },{ xtype:'combobox', fieldLabel:'Text Color', labelWidth:80, width:200 }] }] }] },{ border: false, margin: '5 0 5 0', layout:{ type:'vbox', align:'top' }, items:[{ xtype:'label', text:'Survey Question Attributes', cls:'subTitle' },{ border: false, layout:{ type:'hbox', align:'top', padding:'5 0 0 0' }, defaults:{margins:'0 20 0 0'}, items:[{ xtype:'combobox', fieldLabel:'Font', labelWidth:60, width:250, },{ border: false, layout:{ type:'hbox', align:'top', pack:'end' }, defaults:{margin:'0 5 0 10'}, items:[{ xtype:'combobox', fieldLabel:'Font Size', labelWidth:80, width:200 },{ xtype:'combobox', fieldLabel:'Text Color', labelWidth:80, width:200 }] }] }] },{ border: false, layout:{ type:'vbox', align:'stretch' }, items:[{ xtype:'label', text:'Survey Answers Attributes', cls:'subTitle' },{ border: false, layout:{ type:'hbox', align:'top', padding:'5 0 0 0' }, defaults:{margins:'0 20 0 0'}, items:[{ xtype:'combobox', fieldLabel:'Font', labelWidth:60, width:250, },{ border: false, layout:{ type:'hbox', align:'top', pack:'end' }, defaults:{margin:'0 5 0 10'}, items:[{ xtype:'combobox', fieldLabel:'Font Size', labelWidth:80, width:200 },{ xtype:'combobox', fieldLabel:'Text Color', labelWidth:80, width:200 }] }] }] }] }] }] }], initComponent: function() { this.callParent(arguments); }, constructor: function (config) { this.superclass.constructor.call(this, config); }}); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload