PDA

View Full Version : Grid toolbar issue in Safari browser



Sandeesh
5 Jun 2012, 1:17 AM
I am using ExtJs-4.0.1 and getting the UI distorted for Toolbar in Safari this works fine in FireFox and IE.we have used dockedItems to implement the toolbar at the bottom of the tree grid panel (Ext.tree.Panel) .Can someone please help ?

See the below distorted UI(only the first button is visible):
35957

In other browsers :

35958
Implementation code :
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
width: 955,
height:40,
items: [
{
xtype: 'component',
flex: 0.5
},
{
xtype: 'button',
text: 'First',
handler: function() {
handleNavigation('First');
},
disabled:hasPrev

},
{
xtype: 'button',
text: 'Prev',
handler: function() {
handleNavigation('Prev');
},
disabled:hasPrev

},
{
xtype: 'displayfield',
value: paginationToolbarMessage,
width:100,
style: {fontSize:'12px',
paddingLeft:'15px',
paddingRight:'15px'
}
},
{
xtype: 'button',
text: 'Next',
handler: function() {
handleNavigation('Next');
} ,
disabled:hasNext
},
{ xtype: 'button',
text: 'Last',
handler: function() {
handleNavigation('Last');
} ,
disabled:hasNext
},
{ xtype: 'component', flex: 0.24

},
{
xtype: 'displayfield',
value: 'Total Price:- ' +subTotal,
width:165,
style: {fontSize:'12px',
left:'820px'
}
}
]
}]

Thanks

friend
5 Jun 2012, 3:41 AM
It appears you have some funky styling on the last displayfield in your docked items:

The left: '820px' is probably the culprit.

You might try overriding the layout on the Toolbar to use hbox with pack: 'center'; this will let you get rid of any explicit pixel positioning and should give you better uniformity across browsers.

This layout will present a challenge with the 'Total Price' field, though. You would then probably have to set the parent container layout to 'absolute' and position the Total Price display via x/y coordinates to sit in the bottom right corner and overlay the docked items.