Form content too wide for screen

[Osiris86]

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:

{
    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

[mitchellsimoens]

Can I see a complete test case? I believe I have seen a bug in the bugs forum that seems to be related.

[Osiris86]

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

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:

Ext.Viewport.add(Ext.create('sencha-touch.view.Page2'));

Cheers,
Michael

[APPealing]

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

[DJFliX]

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