View Full Version : Adding buttons to a Panel

11 Aug 2011, 12:30 PM
Whenever I add a button to an Ext.Panel, the button isn't rendered correctly.

With button directly added to panel it looks like this:
http://i.imgur.com/Fq9wA.png (http://imgur.com/Fq9wA)

My temporary solution was to add the buttons to a panel's toolbar:
http://i.imgur.com/UUlcr.png (http://imgur.com/UUlcr)

Does anyone know why the buttons are being drawn that way?

11 Aug 2011, 12:35 PM
I don't run into that problem when i try something like:

new Ext.Panel({
renderTo : Ext.getBody(),
height : 200,
width : 200,
title : 'Panel',
items : {
xtype : 'button',
iconCls : 'icon-add'

Do you have any special CSS?

11 Aug 2011, 12:44 PM
You're right it was my reset css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

Culprit was the vertical-align: baseline;

11 Aug 2011, 12:45 PM
Please mark this question as answered. :)