PDA

View Full Version : Adding buttons to a Panel



amajedi
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?

jay@moduscreate.com
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?

amajedi
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;

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