PDA

View Full Version : Clicking on down arrow in form dropdown field



rooboy35
16 Mar 2011, 7:31 PM
Hi. Have noticed that when you have a dropdown field in a form (ie. see the Rank field in the kitchen sink form demo http://dev.sencha.com/deploy/touch/examples/forms/ ) you can click anywhere in that element EXCEPT on the down arrow to bring up the list of select options.
The arrow is a CSS triangle set on "x-field-select :after" and seems to hide the clickable mask over the element.
Is there any way to allow the user to click on the arrow to bring up the select options? This came to us from a client who was trying to do just that...

Thanks

d5chris
16 Mar 2011, 8:57 PM
You're not alone, i've noticed the exact same thing.
My plan is to use a plain old html 'select' instead of the sencha one. With a bit of styling, it looks just as good:

.myCls {
width:50%;
}
.myCls select {
width:100%;
color:white;
height:28px;
border-radius: 10px;
background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(#466890), color-stop(0.02, #24364C), to(#080C11));
border: 1px solid #000;
}

kwl
16 Mar 2011, 9:55 PM
Rooboy and I have sorted out a solution/hack for this issue within Sencha touch. In an overriding stylesheet, declare the following rules:

/**
* This is a hack to make the select box 'drop-down-arrow' clickable. We remove
* the special arrow border (that generates the triangle) and put it into the
* mask that IS clickable (see the next style block). We should be aware that
* if Sencha *fix* this issue, we may break it again with this change.
*/
.x-field-select:after {
border:none;
}

.x-field-select .x-form-field-container .x-field-mask:after{
border: 0.4em solid #DDD;
border-top-width: 0.4em;
border-right-width: 0.4em;
border-bottom-width: 0.4em;
border-left-width: 0.4em;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-color: #DDD;
border-top-color: #DDD;
content: '';
display: block;
height: 0px;
left: auto;
margin: 1em;
position: absolute;
position: absolute;
right: 0px;
top: 0px;
width: 0px;
z-index: 1;
}

As the comment explains, we move the arrow down into the mask covering the select box, i.e the part that Sencha attaches an onclick event to that was previously obscured by the arrow. Since the arrow is part of the mask, it also becomes clickable = problem solved.

mitchellsimoens
17 Mar 2011, 4:45 AM
Are you guys afraid of wrapping code in the CODE tags?