1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    Osiris86 is on a distinguished road

      0  

    Default Unanswered: Form content too wide for screen

    Unanswered: Form content too wide for screen


    Hi experts,

    I only just started working with Sencha Touch 2 and now ran into my first problem I couldn't figure out myself.

    I created a view which extends Ext.form.Panel. This view contains a couple of elements in the following structure:
    • fieldset
      • a couple of checkboxfields
    • fieldset
      • sliderfield (minValue 0, maxValue 24)
      • textareafield
    • button
    If I open it up in my mobile the content is too wide for my screen which cause horizontal scrollbars to appear. If I switch the orientation of my device to landscape everything works fine but it doesn't adjust it's size correct if I'm in portrait.
    I tried to figure out which controls are causing the problems and was able to narrow it down to the textarea and the slider. If I delete the second fieldset everything is fine. If I leave the slider only, it's just a bit too wide and if I delete the slider only it has the behaviour described above.

    That's how I configured these to elements:

    Code:
    {
        xtype: 'sliderfield',
        label: 'Wie lange verwenden Sie Ihr Smartphone pro Tag?',
        minValue: 0,
        maxValue: 24,
        name: 'duration'                        
    },
    {
        xtype: 'textareafield',
        label: 'Erzählen Sie uns eine Geschichte im Zusammenhang mit Ihrem Smartphone.',
        name: 'story'
    }
    Any hint what I could do or why this is happening?

    Cheers,
    Michael

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,206
    Answers
    3517
    Vote Rating
    856
    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


    Can I see a complete test case? I believe I have seen a bug in the bugs forum that seems to be related.
    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
    May 2012
    Posts
    2
    Vote Rating
    0
    Osiris86 is on a distinguished road

      0  

    Default


    I kind of fixed it in the meantime by adding labelWrap: true, which works but doesn't look very nice. Here the complete page. Don't be confused by the german labels, I was just too lazy to change it to English

    Code:
    Ext.define("sencha-touch.view.Page2", {
        extend: 'Ext.form.Panel',
        requires: [
            'Ext.TitleBar',
    		'Ext.form.FieldSet',
    		'Ext.field.Hidden'
        ],
        config: {
    		title: 'Welcome',
    		iconCls: 'home',
    		id: 'formPage2',
    
    
    		styleHtmlContent: true,
    		scrollable: true,
            items: [
    			{
    				docked: 'top',
    				xtype: 'titlebar',
    				title: 'EBT Umfrage'
    			}, {
    				docked: 'bottom',
    				xtype: 'titlebar',
    				title: '© 2012'
    			}, {
    				xtype: 'fieldset',
    				title: 'Wozu nutzen Sie ihr Smartphone?',
    				items: [
    					{
    						xtype: 'checkboxfield',
    						name : 'email',
    						label: 'E-Mail'
    					},
    					{
    						xtype: 'checkboxfield',
    						name : 'social',
    						label: 'Social Media'
    					},
    					{
    						xtype: 'checkboxfield',
    						name : 'surfing',
    						label: 'Surfen'
    					},
    					{
    						xtype: 'checkboxfield',
    						name : 'phone',
    						label: 'Telefonieren'
    					},
    					{
    						xtype: 'checkboxfield',
    						name : 'sms',
    						label: 'SMS'
    					},
    					{
    						xtype: 'checkboxfield',
    						name : 'gaming',
    						label: 'Gaming'
    					},
    					{
    						xtype: 'hiddenfield',
    						label: 'id',
    						id: 'id',
    						name: 'remoteid'
    					}
    				]
    			}, {
    				xtype: 'fieldset',
    				items: [
    					{
    						xtype: 'sliderfield',
    						label: 'Wie lange verwenden Sie Ihr Smartphone pro Tag?',
    						minValue: 0,
    						maxValue: 24,
    						name: 'duration'
    					},
    					{
    						xtype: 'textareafield',
    						label: 'Erzählen Sie uns eine Geschichte im Zusammenhang mit Ihrem Smartphone.',
    						name: 'story'
    					}
    				]
    			}, {
    				xtype: 'button',
    				text: 'Umfrage beenden',
    				id: 'buttonPage2'
    			}
            ],
    		fullscreen: true
        }
    });
    In my app.js I have this to activate this view:

    Code:
    Ext.Viewport.add(Ext.create('sencha-touch.view.Page2'));
    Cheers,
    Michael

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    APPealing is on a distinguished road

      0  

    Default


    Try adding text-overflow: ellipsis to the labels' styling

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Location
    Utrecht
    Posts
    84
    Answers
    4
    Vote Rating
    3
    DJFliX is on a distinguished road

      0  

    Default


    Yeah, I've got the same problems. When labels are 'longer' than the width of the screen the form will stretch.