1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    41
    Vote Rating
    0
    adms is on a distinguished road

      0  

    Default how to change the form fields height from 30 px to 20 px

    how to change the form fields height from 30 px to 20 px


    hi,how can i override the standard form fields height to be 20px ?

  2. #2
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246
    Vote Rating
    2
    laurentParis is on a distinguished road

      0  

    Default


    make css
    PHP Code:
    .ext-strict .x-form-text {height20px;} 

  3. #3
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    394
    Vote Rating
    14
    devtig will become famous soon enough

      0  

    Default


    And you also want to adjust the combobox and date trigger buttons using:
    Code:
    .x-form-field-wrap .x-form-trigger {height:19px;}
    I believe you have to use minus 1 to make same height as field.

  4. #4
    Sencha User
    Join Date
    May 2009
    Posts
    41
    Vote Rating
    0
    adms is on a distinguished road

      0  

    Default


    this is my code
    but the height is still greater than 20 px why?
    Code:
    <style>
    	.ext-strict .x-form-text {
    		height: 20px;
    	}  
    	.x-form-field-wrap .x-form-trigger {
    		height:19px;
    	}
    </style>
    <script>
    var panel  = new Ext.Panel({
         title: 'title'
        ,renderTo:'mydiv'
        , layout:'form'
        ,items : [{
             xtype:'textfield'	
    	,fieldLabel:'lab'
        }]
    });
    
    </script>

  5. #5
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    394
    Vote Rating
    14
    devtig will become famous soon enough

      0  

    Default


    Inspect the elements using firebug and find out yourself which classes you need to style. It think it's this:
    Code:
    .x-form-field {height:20px;}
    .x-form-field-wrap .x-form-trigger {height:19px;}

  6. #6
    Sencha User
    Join Date
    May 2009
    Posts
    41
    Vote Rating
    0
    adms is on a distinguished road

      0  

    Default


    thanks, it works now

Similar Threads

  1. Extension to dynamically change form fields to readonly ("displayOnly")
    By murrah in forum Ext 2.x: User Extensions and Plugins
    Replies: 16
    Last Post: 2 Feb 2010, 4:08 AM
  2. form fields like defining editor, switch form fields with different xtypes
    By emredagli in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 12 Nov 2009, 3:04 AM
  3. change the height and font size of the form fields
    By emredagli in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 17 May 2009, 10:06 AM
  4. Change Grid Model on Form Fields change
    By shrek in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 27 Feb 2009, 9:42 AM
  5. Replies: 4
    Last Post: 10 Jul 2008, 12:45 AM

Thread Participants: 2