PDA

View Full Version : SearchField with rounded border



Bucs
23 Feb 2011, 11:09 AM
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:



{
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!

mars0122
27 Jul 2011, 3:17 AM
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'
}]