Results 1 to 2 of 2

Thread: SearchField with rounded border

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710

    Default SearchField with rounded border

    I definitely need to learn SASS so I can generate this stuff as needed, but no time right now. Trying to create a simple field in a form panel or toolbar to do searching and creative is calling for rounded edges on the search box. Trying the following to no avail:

    Code:
    {
       xtype: 'searchfield',
       style: 'font-size: .8em; border-radius: .9em; input::-webkit-input-border-radius: .9em'
    }
    I'll convert the style to a class once i get it working.

    UPDATE: Actually..think I'm might be missing the boat here. Probably need to set border to 0 on searchfield and set the radius of a container to be rounded. Will report back

    Thanks for any pointers!

  2. #2
    Sencha User mars0122's Avatar
    Join Date
    May 2011
    Location
    ShenZhen,China
    Posts
    9

    Smile Try to do it like this

    I don't know what your needs exactly, but I think the follows maybe be good for you more or less.If you are in your spare time,just see it as a passage:
    You put the search field under a toolbar component, and you'll see another effections.
    eg.

    id: 'friendsAdditionSearchPanel',
    xtype: 'toolbar',
    layout: 'hbox',
    width: '100%',
    style: 'background:#FFAD33;',
    items: [{
    id: 'friendsAdditionSearchForm',
    name: 'friendsAdditionSearchForm',
    xtype: 'searchfield',
    style: 'font-size:.9em;border-radius:.9em;input::-webkit-input-border-radius:.9em',
    ui: 'dark',
    required: true,
    autoComplete: true,
    autoDestroy: true,
    margin: '1px',
    placeHolder: 'Search Partner'
    }]

Similar Threads

  1. Problem with SearchField (ext.ux.form.SearchField)
    By Deeeem in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 29 Jan 2011, 9:13 PM
  2. Rounded Box Squared Off.
    By lammie1971 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 25 Nov 2010, 6:29 PM
  3. White-rounded border QuickTips?
    By rjanos in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 25 Sep 2008, 10:01 AM
  4. SearchField icon (magnifying glass) Not Shown Unless x-border-panel Class Removed
    By Hostile Fork in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 21 Jun 2008, 6:42 PM
  5. Rounded corners?
    By jarrod in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 18 Oct 2006, 3:45 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
  •