1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    Answers
    1
    hekomobi is on a distinguished road

      0  

    Default Unanswered: How to adjust content dynamic into Ext.Msg.confirm?

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


    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
    Code:
    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
    Code:
    .x-msgbox-body {
        padding:40px0;
        padding:6px0;
        background-color:#ffffff;
        color:#094fa4;
        position:relative;
        margin:0auto;
        text-align: center;
        overflow: hidden;
    }
    Please help me.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    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();
                }
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    Answers
    1
    hekomobi is on a distinguished road

      0  

    Default


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

    Something like this

    Code:
    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,

    Code:
    .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.

Thread Participants: 1