Results 1 to 2 of 2

Thread: Form labels aligned incorrectly when inside box layouts

    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
    443
    Vote Rating
    18
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    This has already been fixed for the next release.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

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