Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    416
    Vote Rating
    18
    jweber will become famous soon enough

      0  

    Default Form labels aligned incorrectly when inside box layouts

    Form labels aligned incorrectly when inside box layouts


    REQUIRED INFORMATION


    Ext version tested:
    • Sencha Touch 2.2

    Browser versions tested against:
    • Chrome for Mac 26.0.1410.65

    DOCTYPE tested against:
    • html

    Description:
    • If you put a form field with labelAlign=left inside a container with layout=hbox or vbox, the label will appear on top of the field.

    Steps to reproduce the problem:
    • Load the example below

    The result that was expected:
    • Label is on the left

    The result that occurs instead:
    • Label is on top

    Test Case:

    Code:
    Ext.create('Ext.Container', {
    	fullscreen: true,
    	layout: 'hbox',
    	items: [{
    		xtype: 'selectfield',
    		label: 'Test',
    		options: [
    			{text: 'One', value: '1'},
    			{text: 'Two', value: '2'}
    		],
    		value: '1'
    	}]
    });


    HELPFUL INFORMATION


    Screenshot or Video:
    • N/A

    See this URL for live test case: N/A


    Debugging already done:
    • If you change the layout to 'fit', it works correctly. Ironically, it seems like the cause of this problem is in touch/resources/themes/stylesheets/sencha-touch/base/src/layout/_Fit.scss:
      Code:
      .x-stretched.x-container {
          ...
          @include st-box-orient(vertical);
      }
      If I disable the resulting "-webkit-box-orient" rule, it fixes the alignment. But I'd love to know a workaround that doesn't involve such a global style change, if there is one.
    • There's another rule in touch/resources/themes/stylesheets/sencha-touch/base/src/layout/_Box.scss:
      Code:
      .x-layout-box {
          ...
          > .x-layout-box-item {
              @include st-box(important);
          }
      }
      In 2.1.1, this rule used to take precedence over the previous one. And that seemed to correct the problem. But in 2.2, it doesn't.

    Possible fix:
    • not provided

    Additional CSS used:
    • base theme

    Operating System:
    • Mac OS 10.8.3

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


    This has already been fixed for the next release.
    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.

Thread Participants: 1

Tags for this Thread