Vacheslav Starikov's » yui http://starikovs.com BLOG Sun, 05 Sep 2010 18:05:10 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Inline YUI AutoComplete layout http://starikovs.com/2009/11/04/inline-yui-autocomplete-layout/ http://starikovs.com/2009/11/04/inline-yui-autocomplete-layout/#comments Wed, 04 Nov 2009 11:28:27 +0000 Vacheslav http://starikovs.com/?p=71 Inline YUI AutoComplete layout Recently, i had a problem with YUI AutoComplete layout. I wanted it being inline, fixed width and working with different browsers like IE6/7/8, Opera, FF etc. There were some problems that i solved primarily in CSS. More precisely, i needed an inline YUI AutoComplete layout in such a way that i can place autocomplete <input> next to the <label> without a line break. I just set my styles in CSS and override some existing styles and it works ok!

So, problems i had to solve for my needs:

  • an outer container is a DIV so INPUT always goes on the next line
  • inline-block for DIV doesn’t work in IE6/7
  • an outer container has width of 100%
  • INPUT is absolutely positioned so an outer DIV is collapsed
  • width of 100% makes INPUT 6px larger then outer DIV in IE6
  • using inline-block, INPUT aligns vertically on the bottom in IE6

YUI files to include

Let’s begin with files to include:

<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css">
 
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
 
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/autocomplete-min.js"></script>

Well, i’m explaining below how i’ve achieved an inline YUI AutoComplete layout. The code is well-commented to understand what is happening :)

HTML

<!-- 
Let's use SPAN becase it has "display: inline" by default.
IE6/7 can apply "display: inline-block" only for elements
that have "display: inline" by default.
Read more: http://www.quirksmode.org/css/display.html.
-->
<label for="input">YUI AutoComplete</label>
<span id="autocomplete">
    <input id="input" type="text">
    <div id="results"></div>
</span>
 
<script type="text/javascript">
/* creating a data source out of js array */
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
 
/* creating a yui autocomplete */
var ac = new YAHOO.widget.AutoComplete("input", "results", ds);
</script>

CSS

/* outer container */
#autocomplete {
    /* behaving like an inline element */
    display: -moz-inline-box; /* for FF less then 3.0 */
    display: inline-block !important;
 
    position: relative;
    /* standard width of a textbox */
    width: 145px;
 
    /* align vertically on the center */
    vertical-align: middle; 
}
 
/* input */
#autocomplete input {
    /* preventing an outer container DIV collapsing */ 
    position: relative;
    /* tweaking to traditional box model
     * width = border + padding + content
     */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box; /* ie8 */
 
    /* CSS Expression to calculate width for the input.
     * 2px border + 1px padding + 1px padding + 2px border = 6px.
     * Only for IE6/7 because traditional box model cannot
     * be tweaked by any css property.
     * currentStyle object - IE css styles as specified by 
     * global style sheets, inline styles, and HTML attributes.
     */
    *width: expression(parseInt(this.parentNode.currentStyle.width)-6+'px');
}

I’ve tested this soluting in FireFox 3.5, Opera 10, IE 6/7/8. YUI version i’m using is 2.8.

Further reading:

]]> http://starikovs.com/2009/11/04/inline-yui-autocomplete-layout/feed/ 2