How to adjust content dynamic into Ext.Msg.confirm?

[hekomobi]

I try adjust content auto dynamic into Ext.Msg.confirm, but i don'n try to adjust it. The remains Ext.Msg.confirm adjusted to the larger size of the content.

I have this code:
header

div.x-sheet.x-msgbox {
    width:15em;
    height:auto;
    background:#fff;
    -webkit-box-shadow: rgba(0,0,0,0.4)00.1em0.5em;
    -webkit-border-radius:0.3em;
    -moz-box-shadow: rgba(0,0,0,0.4)00.1em0.5em;
    -moz-border-radius:0.3em;
    border-radius:0.3em;
    border:0.15em solid #FFFFFF;
}

body

.x-msgbox-body {
    padding:40px0;
    padding:6px0;
    background-color:#ffffff;
    color:#094fa4;
    position:relative;
    margin:0auto;
    text-align: center;
    overflow: hidden;
}

Please help me.

[mitchellsimoens]

The height is set by Sencha Touch so the CSS won't help.

new Ext.Container({
    fullscreen : true,
    items      : [
        {
            xtype   : 'button',
            text    : 'Open 1',
            handler : function () {
                Ext.Msg.confirm('Title', 'Long Message<br /><br />Test if resize', Ext.emptyFn);
            }
        },
        {
            xtype   : 'button',
            text    : 'Open 2',
            handler : function () {
                Ext.Msg.confirm('Title', 'Resize?', Ext.emptyFn);
                Ext.Msg.doComponentLayout();
            }
        }
    ]
});

[hekomobi]

Thanks @mitchell, but I resolved with CSS class into ../resources/css/sencha_touch.css.

Something like this

div.x-sheet.x-msgbox {
	width: 30%;
	height: 30%;
	background: #fff /*center 100% repeat-y padding-box*/;
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 0.5em;
	-webkit-border-radius: 0.3em;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0.1em 0.5em;
	-moz-border-radius: 0.3em;
	border-radius:0.3em;
	border:0.15em solid #FFFFFF;
}

and,

.x-msgbox-body {
padding: 2px 0;
position: relative;
width: 100%;
/*max-height:80%; */
height: 40%; /**/
text-align: center;
overflow: hidden;
}

Thanks so much for your answer, thats fine.