Create a gist now

Instantly share code, notes, and snippets.

CSS attempt for [ #316246 ] Autocomplete: styling of button is incorrect and different in XForms Controls vs. Controls form
* The structure of the HTML as seen by the browser can be summaries as follows:
* div class="xbl-fr-autocomplete"
* div class="yui-ac" position: static (overrides YUI: relative, see comment below)
* span class="xforms-input"
* input class="xforms-input-input" Input in which users type width: 140px, position: static (overrides YUI relative, see comment below)
* div class="xbl-fr-select1-button" Component showing full itemset
* div class="yui-ac-container" position: absolute
* div class="yui-ac-content" Suggestions position: absolute, overflow: hidden, width: 140px
* For testing, to keep the suggestion list open while interacting with Firefox, disabled the display: none on the <div class="yui-ac-content">.
* Override position: absolute in YUI, otherwise the the input is taken out of the flow and content after the
* autocomplete will show under the input field. Only the yui-ac-content is position:absolute, not the .yui-ac.
* The downside of this technique is that we can't automatically size the suggestion box based on the width of the input
* field, and need to set the width of the input field and the suggestion box.
.xbl-fr-autocomplete .xforms-input-input { position: static; width: 140px }
.xbl-fr-autocomplete .yui-ac { position: static }
.xbl-fr-autocomplete .yui-ac-content { width: 140px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
/* Make the div that contains the text field inline-block so the component can be used in inline mode */
.xbl-fr-autocomplete .yui-ac {
display: -moz-inline-box;
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: middle;
/* Always show the text field and the button on the same line */
.xbl-fr-autocomplete .yui-ac { white-space: nowrap }
/* Button inline, next to the text field */
.xbl-fr-autocomplete .xbl-fr-select1-button { vertical-align: middle; display: inline-block; *display: inline }
/* Get the input field vertically aligned on the button */
.xbl-fr-autocomplete .xbl-fr-select1-button .yui-menu-button { vertical-align: middle }
.xbl-fr-autocomplete input { vertical-align: middle }
/* Hide the text that would otherwise show in the button */
.xbl-fr-autocomplete .xbl-fr-select1-button .yui-menu-button button {
width: 22px;
text-indent: -9999px;
*text-indent: 0;
*padding-left: 9999px;
padding-right: 15px;
min-height: inherit;
height: 1.6em
.xbl-fr-autocomplete .fr-autocomplete-show-suggestions-button button,
.xbl-fr-autocomplete .fr-autocomplete-show-suggestions-button button:hover {
/* Override the min-height of 2em set in button.css. Ideally, we like to make the button exactly the same height
as the text field, but this is a fairly decent approximation */
min-height: 1.8em;
/* The padding on the button should be enough, but without specifying a width, IE 7/8 shows the down arrow too
much to the left */
width: 25px;
/* Center button vertically inside its container span */
vertical-align: middle;
/*margin-left: .5em;*/
.fr-grid .fr-grid-content .xbl-fr-autocomplete button.xforms-trigger,
.fr-grid .fr-grid-content .xbl-fr-autocomplete .xforms-trigger button {
margin-top: 0 /* override FR style */
.xbl-fr-autocomplete .fr-autocomplete-show-suggestions-button span {
display: -moz-inline-box;
display: inline-block;
width: 16px;
height: 4px;
margin-left: 1px;
background: url("../../../ops/yui/button/assets/skins/sam/menu-button-arrow.png") no-repeat right center;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment