You found a bug! We've classified it as TOUCH-490 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default [OPEN-726] bad clear icon handling when Text field is in a toolbar

    [OPEN-726] bad clear icon handling when Text field is in a toolbar


    This could be a feature request, depending if Ext.form.Text.useClearIcon is supposed to be documented or if it's an "unofficial" bit subject to change. Basically, when you stick a Text on a toolbar and use useClearIcon=true, the clear button doesn't get the proper styling. It's not that there's a bug in the styling, it just simply that the clear button part has no .x-toolbar styling like the main text field part does.

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    3
    Vote Rating
    0
    csullins is on a distinguished road

      0  

    Default


    I've had some success with the following scss. I've named the magic constants (locally), which are based on _forms.scss.

    Code:
    .x-toolbar .x-field-clear-container {
    	$form-clear-size: 1.1em;
    	$text-shrink: 0.8;
    	$border-radius-size: $form-clear-size / 2 / $text-shrink;
    	
    	min-height: 0;
    	position: absolute;
    	top: 1px;
    	bottom: 1px;
    	right: 1px; // account for the border
    	font-size: 1em * $text-shrink;
    	@include border-radius(0 $border-radius-size $border-radius-size 0);
    	background-color: $toolbar-input-bg;
    }
    .x-toolbar {
    	$padding-sides: 0.3em;
    	
    	.x-input-search, .x-field-select {
    		&.x-field-clearable {
    			padding-right: $padding-sides * 2;
    		}
    	}
    }
    Last edited by csullins; 8 Feb 2011 at 9:25 PM. Reason: cleaning up constants

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    3
    Vote Rating
    0
    csullins is on a distinguished road

      0  

    Default


    Also, if this posts, the Preview button doesn't work.

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    davidlevy is on a distinguished road

      0  

    Default


    This CSS works for me :

    Code:
    .x-toolbar .x-field-clear-container {    
        min-height: 0;
        position: absolute;
        top: 2px;
        bottom: 1px;
        right: 5px;
        font-size: 0.8em;
        border-radius:20px;
    }
    .x-toolbar .x-input-search, .x-field-select,  .x-field-clearable {
                padding-right:1em;
    }
    Thanks !

  5. #5
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    That helped, but there's a couple of other things I found weren't quite right. Try this:

    Code:
    .x-toolbar .x-field-clear-container {    
        min-height: 0;
        position: absolute;
        top: 2px;
        bottom: 1px;
        right: 5px;
        font-size: 0.8em;
        border-radius:20px;
        background-color: inherit !important;
    }
    .x-toolbar .x-input-text.x-field-clearable, .x-toolbar .x-input-search, .x-toolbar .x-input-number.x-field-clearable {
      padding-right: 35px;
    }
    
    .x-toolbar .x-field-clear {
      padding-top: 1px;
    }
    It fixes the X being a little offset from the circle, plus a white circle around the clear button that overlapped the background shading of the text box. It also makes sure you can't type past a certain point in the text field so the text won't get into the clear button. I think that's what your last bit was supposed to accomplish but I found it would get overridden by other CSS so I tweaked the selectors a bit. You could also do it with !important on yours, but I'm not sure what else might be affected.

  6. #6
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    220
    Vote Rating
    8
    mike.estes will become famous soon enough

      0  

    Default


    726 is the bug id from our old issue tracking system, the bug id in the new system is TOUCH-490

Similar Threads

  1. [OPEN-532] Rendering issues with 'x' clear icon
    By dloomer in forum Sencha Touch 1.x: Bugs
    Replies: 6
    Last Post: 20 Jan 2012, 8:00 AM
  2. [OPEN-726] Row editor bugs
    By minspect in forum Ext 3.x: Bugs
    Replies: 7
    Last Post: 22 Dec 2010, 7:18 AM
  3. Replies: 1
    Last Post: 5 Jul 2010, 4:13 AM
  4. [FIXED] [1.2] Empty text does not clear from text field in IE7
    By cravemusic in forum Ext GWT: Bugs (1.x)
    Replies: 1
    Last Post: 15 Dec 2008, 9:59 AM

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar