Reputation: 4513
I have a container with a few different items stacked in. I also would like to have two title bars inside the container BUT with height reduced to 10 points. I have tried to reduce the size using setHeight() with a lesser number but I can't seem to achieve that. Am I missing something obvious?
Is there a way I can reduce the height of a toolbar/titlebar in Sencha Touch? Help!
UPDATE: Here is the code I use for a toolbar...
Ext.define('MyApp.view.CookingSteps', {
extend: 'Ext.Container',
alias: 'widget.CookingSteps',
config: {
height: '',
html: '',
id: 'CookingSteps',
itemId: 'CookingSteps',
style: '',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
height: 50,
html: '<b><center>AdBanner Goes Here',
style: 'background: gray;',
styleHtmlContent: true
},
{
xtype: 'container'
},
{
xtype: 'fieldset',
title: '',
items: [
{
xtype: 'textfield',
label: '',
placeHolder: 'Username'
},
{
xtype: 'textfield',
label: '',
placeHolder: 'Passphrase'
}
]
},
{
xtype: 'toolbar',
docked: 'top',
height: 20,
minHeight: '20',
title: 'Login'
},
{
xtype: 'container',
items: [
{
xtype: 'button',
centered: true,
ui: 'confirm',
width: 283,
text: 'Go Ahead :)'
}
]
}
]
}
});
I want the toolbar with title 'Login' with a reduce height.. Any help would be greatly appreciated. Thank you in advance. :)
Upvotes: 0
Views: 2475
Reputation: 36
If you need to adjust toolbar size use minHeight option with units in toolbar config. Here is a toolbar example with a 2x of current font size height.
{
xtype: 'toolbar',
docked: 'top',
minHeight: '2em',
}
Upvotes: 2