public
Last active

CSS attempt for [ #316246 ] Autocomplete: styling of button is incorrect and different in XForms Controls vs. Controls form

  • Download Gist
gistfile1.txt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
/**
* 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
http://wiki.orbeon.com/forms/doc/contributor-guide/ie-bugs#TOC-Inline-block */
.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 button.fr-autocomplete-show-suggestions-button,
.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;
 
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.