Results 1 to 7 of 7

Thread: How to align fieldlabel

  1. #1
    Sencha Premium User
    Join Date
    Aug 2012
    Posts
    70

    Question Answered: How to align fieldlabel

    hi,

    As the picture shows, I want to align the fieldlabel to the same height with the input field. Please help, thanks.

    QQ??20160422102640.png

  2. I see, well one way would be to target the table cell using css:


    Code:
    .main-viewport .x-field-label-cell
    {
        vertical-align:middle;
    }
    And then:

    Code:
    Ext.application({
        name: 'Fiddle',
    
    
        launch: function() {
            Ext.widget('viewport', {
                layout: 'hbox',
                cls:'main-viewport',
                fieldDefaults: {
                    height: 100  
                },
                items: [{
                        xtype: 'datefield',
                    	height: 60,
                        fieldLabel: 'attribute',
                        flex:1
                    }, {
                        xtype: 'datefield',
                        fieldLabel: 'to',
                        flex:1
                    }, {
                        xtype: 'datefield',
                        fieldLabel: 'from',
                        flex:1
                    }]
    
    
                
            })
        }
    });

  3. #2
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    You shouldn't have to do anything at all to align the fieldLabel. It aligns by itself:

    https://fiddle.sencha.com/#fiddle/1942

  4. #3
    Sencha Premium User
    Join Date
    Aug 2012
    Posts
    70

    Default

    Quote Originally Posted by jdkhamba View Post
    You shouldn't have to do anything at all to align the fieldLabel. It aligns by itself:

    https://fiddle.sencha.com/#fiddle/1942
    But if I set the height of the field, only the input field will be center vertically, fieldlabel still keep on the top.

  5. #4
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    Can you post a fiddle or code to demonstrate your specific issue?

  6. #5
    Sencha Premium User
    Join Date
    Aug 2012
    Posts
    70

    Default

    Quote Originally Posted by jdkhamba View Post
    Can you post a fiddle or code to demonstrate your specific issue?
    https://fiddle.sencha.com/#fiddle/1943

    you can see this, thanks

  7. #6
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    I see, well one way would be to target the table cell using css:


    Code:
    .main-viewport .x-field-label-cell
    {
        vertical-align:middle;
    }
    And then:

    Code:
    Ext.application({
        name: 'Fiddle',
    
    
        launch: function() {
            Ext.widget('viewport', {
                layout: 'hbox',
                cls:'main-viewport',
                fieldDefaults: {
                    height: 100  
                },
                items: [{
                        xtype: 'datefield',
                    	height: 60,
                        fieldLabel: 'attribute',
                        flex:1
                    }, {
                        xtype: 'datefield',
                        fieldLabel: 'to',
                        flex:1
                    }, {
                        xtype: 'datefield',
                        fieldLabel: 'from',
                        flex:1
                    }]
    
    
                
            })
        }
    });

  8. #7
    Sencha Premium User
    Join Date
    Aug 2012
    Posts
    70

    Default

    That what I need, Thanks!

Similar Threads

  1. how to image align fieldLabel?
    By s0165 in forum Ext: Q&A
    Replies: 2
    Last Post: 22 Sep 2015, 7:31 PM
  2. How to set right align to FieldLabel
    By pabloarmanini in forum Sencha GXT Q&A
    Replies: 2
    Last Post: 31 Oct 2012, 10:24 AM
  3. How to align a comboBox under the fieldlabel?
    By guyza in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 22 Sep 2010, 12:31 PM
  4. Replies: 6
    Last Post: 30 Jul 2009, 1:59 AM

Posting Permissions

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