1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    78
    Vote Rating
    0
    abu_hamid is on a distinguished road

      0  

    Default Unanswered: Scale Form elements

    Unanswered: Scale Form elements


    Hi,

    I am making an iphone/iPad application,
    everything is scaled nicely but only the form elements or the text does not scale nicely

    Ipad design
    ipad.png


    iPhone:

    iphone.png


    Any idea on how to make it consistent ?

    I tried to force % size on the fields but it has no effect.

  2. #2
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    Please post the code that you used to produce what you have. How did you set up your theme? Did you use the built-in sass variables and mixins in the theming framework? Do you have a mockup of what you want it to look like?

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    78
    Vote Rating
    0
    abu_hamid is on a distinguished road

      0  

    Default


    In don't think it is a theming issue...
    I will post my code but what I think is that whatever i do with the fields they stay the eact same way.
    Basically, what I would love to know is how can we adapt those fields element to the resolution of the screen so we don't have them with an unnecessary huge size on screen.

    First I have my navigation view:

    Code:
    Ext.define('BeautifulMinds.view.mainNav', {
        extend: 'Ext.navigation.View',
        alias: 'widget.mainnav',
    
        requires: [
            'BeautifulMinds.view.mainchoice'
        ],
    
        config: {
            scrollable: false,
            layout: {
                animation: {
                    type: 'fade',
                    direction: 'down'
                },
                type: 'card'
            },
            navigationBar: {
                hidden: true
            },
            items: [
                {
                    xtype: 'mainchoice'
                }
            ]
        }
    
    });

    Then my login page

    Code:
    Ext.define('BeautifulMinds.view.mainchoice', {
        extend: 'Ext.Panel',
        alias: 'widget.mainchoice',
    
        requires: [
            'BeautifulMinds.view.footer'
        ],
    
        config: {
            modal: true,
            scrollable: false,
            items: [
                {
                    xtype: 'container',
                    height: '100%',
                    left: '0%',
                    top: '0%',
                    width: '100%',
                    scrollable: false,
                    items: [
                        {
                            xtype: 'container',
                            height: '100%',
                            left: '0%',
                            style: 'background: rgba(242,242,242, 1.0)',
                            top: '0%',
                            width: '100%'
                        },
                        {
                            xtype: 'container',
                            height: '40%',
                            html: '<img src="./images/Beautiful Minds Login Redesign/Beautiful-Minds-Logo.png" style="width:100%; height:100%" />',
                            left: '20%',
                            top: '10%',
                            width: '60%'
                        },
                        {
                            xtype: 'container',
                            right: '18%',
                            style: '-webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 1); box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 1);-webkit-border-radius: 10px; border-radius: 10px; padding: 10px 15px 10px 15px; background:rgba(255,255,255,1.0);',
                            top: '55%',
                            width: '66%',
                            scrollable: false,
                            items: [
                                {
                                    xtype: 'emailfield',
                                    border: 0,
                                    id: 'logname',
                                    itemId: 'logname',
                                    style: 'background: #aac0cd;margin-top: 10px;',
                                    label: 'EMAIL',
                                    labelWidth: 'auto',
                                    name: 'logname'
                                },
                                {
                                    xtype: 'passwordfield',
                                    id: 'logpassword',
                                    itemId: 'logpassword',
                                    style: 'background: #aac0cd;margin-top: 20px;',
                                    label: 'PASSWORD',
                                    labelWidth: 'auto',
                                    name: 'logpassword'
                                },
                                {
                                    xtype: 'component',
                                    style: 'margin-top:30px;border-bottom: 1px solid black;'
                                },
                                {
                                    xtype: 'button',
                                    border: 0,
                                    height: '5%',
                                    html: '<img src="./images/Beautiful Minds Login Redesign/Register-Button.png" style="width:100%; height:100%" />',
                                    itemId: 'mybutton1743',
                                    style: 'background:transparent; margin-top: 15px;float: left; margin-left: 5px;',
                                    width: '30%'
                                },
                                {
                                    xtype: 'button',
                                    border: 0,
                                    height: '5%',
                                    html: '<img src="./images/Beautiful Minds Login Redesign/Lite-Version-Button.png" style="width:100%; height:100%" />',
                                    itemId: 'mybutton1744',
                                    style: 'background:transparent; margin-top: 15px;float: left; margin-left: 5px;',
                                    width: '37%'
                                },
                                {
                                    xtype: 'button',
                                    border: 0,
                                    height: '5%',
                                    html: '<img src="./images/Beautiful Minds Login Redesign/Login-Button.png" style="width:100%; height:100%" />',
                                    itemId: 'mybutton1745',
                                    style: 'background:transparent; margin-top: 15px;float: left; margin-left: 5px;',
                                    width: '25%'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            handler: function(button, event) {
                                localStorage.setItem('langapp', 'ar');
                                button.up('navigationview').push({
                                    xtype: 'armainchoice'
                                });
                            },
                            baseCls: 'x-transparent',
                            height: '3%',
                            html: '<img src="./images/patients/choose screen/Arabic-White.png" style="width:100%; height:100%" />',
                            right: '8%',
                            top: '1%',
                            width: '17%',
                            zIndex: 5
                        },
                        {
                            xtype: 'button',
                            handler: function(button, event) {
                                localStorage.setItem('langapp', 'en');
                                button.up('navigationview').push({
                                    xtype: 'mainchoice'
                                });
                            },
                            baseCls: 'x-transaprent',
                            height: '3%',
                            html: '<img src="./images/patients/choose screen/ENGLISH_orange.png" style="width:100%; height:100%" />',
                            right: '25%',
                            top: '1%',
                            width: '18%',
                            zIndex: 5
                        },
                        {
                            xtype: 'footer1',
                            right: '2%'
                        }
                    ]
                }
            ]
        }
    });

  4. #4
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    You have a lot of inline styling in that code and a lot of percentages flying around. What happens when you remove the inline styles and all those top, left, width, height config options?

    I would recommend that you strip out all of this inline styling and create a theme. Do you really want to maintain this as is?

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    78
    Vote Rating
    0
    abu_hamid is on a distinguished road

      0  

    Default


    I tried a lot of options. Whatever I do, even if it is a random panel without any style applied it seems that fields do not scale as I would like them to. I have a specific design to apply for ipad and iphone. I can't make 2 different themes. This is why I am asking. I need to find a way so the phones version looks the exact same way as the ipad version.

  6. #6
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    The code you have is not leveraging many of the niceties that the framework offers you. I would recommend that you review this guide on layouts to start:

    http://docs.sencha.com/touch/2-1/#!/guide/layouts

    Just using layouts will dramatically reduce your code footprint and take some of the maintenance headache away. I removed all the inline styles and config options in your code, much of which was repeating itself several times over and reduced your javascript code by 40%.

    As far as creating device-specific styles, this is easily achievable by using any/all of the following:

    - css classes such as .x-phone, .x-tablet, and even platform specific such as .x-ios
    - media queries
    - Touch version 2.2 beta has support for platform-specific style loading via app.json

    This is just one view. Imagine what happens as your app grows and you continue on as you have.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    78
    Vote Rating
    0
    abu_hamid is on a distinguished road

      0  

    Default


    Hi,

    thanks for the answer which helps me understand a bit ore sencha.

    But basically, my question was initially to find a way to define a specific size for a field, so I keep the same ratio on all kinds of devices/resolution. How could I do that ? Because this seems the only kind of element i can't really size the way i want and then it looks awful on small resolutions...

  8. #8
    bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    If you take out the inline stuff and create your own theme, there are sass variables you can use to control this stuff. For your specific question, you can use the $form-field-height variable. Have a look at this and other related sass variables that are available on the Ext.field.Field class:

    http://docs.sencha.com/touch/2-1/#!/...m-field-height

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi