Scale Form elements

[abu_hamid]

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.

[bricemason]

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

[abu_hamid]

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:

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

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%'
                    }
                ]
            }
        ]
    }
});

[bricemason]

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

[abu_hamid]

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.

[bricemason]

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

[abu_hamid]

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

[bricemason]

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