Results 1 to 3 of 3

Thread: [RC2] css glitch in form

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187

    Default [RC2] css glitch in form

    There is a css glitch since beta-2 :

    Capture d’écran 2012-02-17 à 18.41.18.jpgCapture d’écran 2012-03-02 à 21.52.22.jpg

    Test Case class :

    Code:
    Ext.define(app.ns + '.element.phoneNumber', {
    
    
    	alias: 'widget.phonenumber',
    	extend: 'Ext.Container', // broken too !
    	//extend: 'Ext.form.FieldSet',
    
    
    	config: {
    		cls: 'x-form-fieldset-inner',
    		layout: 'hbox'
    	},
    
    
    	initialize: function() {
    
    
    		var fieldOptions = [{text: 'mobile', value: 'mobile'}, {text: 'home', value: 'home'}, {text: 'home fax', value: 'home fax'}, {text: 'other', value: 'other'}];
    
    
    		this.add([
    		{
    			xtype: 'selectfield',
    			name: 'type',
    			options: fieldOptions,
    			flex: 1
    		},
    		{
    			xtype: 'textfield',
    			name: 'value',
    			input: {type: 'tel'},
    			value: '+33 6 12 34 56 78',
    			placeHolder: 'Phone',
    			clearIcon: true,
    			listeners: {},
    			flex: 3
    		}
    		]);
    	}
    
    
    });
    
    
    
    
    Ext.define(app.ns + '.view.BasicFieldsetTest', {
    
    
    	id: 'basicfieldset-test',
    	alias: 'widget.basicfieldset-test',
    	extend: 'Ext.form.FormPanel',
    	requires: [],
    
    
    	config: {},
    
    
    	initialize: function() {
    		this.callParent();
    		var self = this;
    
    
    		// Add titlebar
    		this.add([{
    			xtype: 'titlebar',
    			title: this.getId() + ' - ' + Ext.version.version
    		}]);
    
    
    		// Configure component
    		this.add([
    			{ xtype: 'spacer', height: '20px' },
    			{ xtype: 'fieldset', items: [
    				{ xtype:'phonenumber' },
    				{ xtype:'phonenumber' }
    			]}
    		]);
    
    
    	}
    
    
    });
    Bootstrap :

    Code:
    window.d = true;
    window.app = {
    	ns: 'MyApp'
    };
    
    
    
    
    //http://jsfiddle.net/rUP86/1/
    Ext.application({
    
    
    	name: app.ns,
    	controllers: [],
    	stores: ['ContactList'],
    	//views: ['Viewport'],
    
    
    	launch: function() {
    		d&&console.log(app.ns + '.application#launch', [this, arguments]);
    
    
    		// Create Viewport
    		this.viewport = Ext.create(app.ns + '.view.Viewport');
    	},
    
    
    	getViewport: function() {
    		return this.viewport;
    	}
    
    
    });
    
    
    Ext.define(app.ns + '.view.Viewport', {
    
    
    	id: 'viewport',
    	extend: 'Ext.Container',
    
    
    	config: {
    		layout: {
    			type: 'card',
    			animation: {type: 'slide'}
    		},
    		fullscreen: true
    	},
    
    
    	initialize: function() {
    		this.callParent();
    		d&&console.log(Ext.getDisplayName(arguments.callee), [this, arguments]);
    
    
    		this.addCls('test');
    		console.warn(this.getCls());
    		this.removeCls('test');
    		console.warn(this.getCls());
    
    
    		this.add([
    			//{xtype: 'segmentedbutton-test'},
    			//{xtype: 'complexfieldset-test'},
    			{xtype: 'basicfieldset-test'}
    		]);
    
    
    	}
    
    
    });

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    Fieldset has not been made to work this way. You will need to add custom CSS to make it work with items that are not fields. Something like this will make it work:

    Code:
    .x-form-fieldset .x-field:last-child { border-bottom: 1px solid #ddd !important; }
    You will also need to target the first and child children of .x-form-fieldset-inner and insure the border is removed correctly. There will also be issues with rounded corners (as we target the fields).
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •