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
    221
    Vote Rating
    9
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi