Loading ...
Sorry, an error occurred while loading the content.
 

YUi Autocomplete container is clipped when it descens below boundries of div

Expand Messages
  • kalyani_phadke
    YUi Autocomplete container is clipped when it descens below boundries of pop up div (absolute position and overflow:hidden).I have YUI AC on Pop up div which
    Message 1 of 2 , Aug 6 3:50 PM
      YUi Autocomplete container is clipped when it descens below boundries of pop up div (absolute position and overflow:hidden).I have YUI AC on Pop up div which is opened on button click.My code is as follows pls help.


      <div id="popupbox" style="">

      <div id="popupbox_bd">
      <form name="popupform">

      <div id="row_time" class="row">
      <div class="left"><label class="svalue" for="input_stime">Time: </label></div>
      <div class="right">
      <div style="float:left;">

      </div>

      <div style="float:left">
      <div id="bACinput_etime">
      <input id="input_etime" type="text" size="8" class="timeinput" value="00:00"/>
      <div id="bContainer_input_etime">
      </div>
      </div>

      <script type="text/javascript">

      YAHOO.example.Combobox1 = function() {
      var bAC_eTime_currentSelection;
      var CurrentItemIndex, PreviousItemIndex;

      // Define a custom search function for the DataSource
      // to return all data irrespective of query string
      var CustomDataSearch = function(sQuery) {

      var contact;
      var i = 0;
      var matches = [];


      for (i = 0; i < TimeArray.length; i++) {
      contact = TimeArray[i];
      matches[matches.length] = contact;

      }

      return matches;
      };

      // Use a FunctionDataSource
      var bDS = new YAHOO.util.FunctionDataSource(CustomDataSearch);

      bDS.responseSchema = { fields: ["Time", "selected"] };



      // Increase the cache size
      bDS.maxCacheEntries = 50;

      // Instantiate AutoCompletes
      var oConfigs = {
      prehighlightClassName: "yui-ac-prehighlight",
      useShadow: false,
      queryDelay: 0,
      minQueryLength: 0,
      animVert: .01
      }
      bAC_eTime = new YAHOO.widget.AutoComplete("input_etime", "bContainer_input_etime", bDS, oConfigs);


      // Show more results, scrolling is enabled via CSS
      bAC_eTime.maxResultsDisplayed = 50;
      // bAC_eTime.useIFrame = true;

      // Update current selection tracker as necessary
      bAC_eTime.itemSelectEvent.subscribe(function(type, args) {
      bAC_eTime_currentSelection = args[2].Time;


      });

      // Update current selection tracker as necessary
      bAC_eTime.textboxKeyEvent.subscribe(function(type, args) {

      // bAC_eTime_currentSelection = null;

      });

      //Custom function to highlight selected entry
      bAC_eTime.doBeforeExpandContainer = function(elTextbox, elContainer, sQuery, aResults) {

      //Add 0 to search String if String Length is less than 2 eg 2->02
      if (sQuery.length < 2) {
      sQuery = "0" + sQuery;
      }
      //Loop through entire array input to match record with search string and highlight it.

      var items = this.getListItems(),
      item, itemData;
      for (var i = 0; i < items.length; i++) {
      item = items[i];
      itemData = this.getListItemData(item);

      if (itemData && (itemData[0].indexOf(decodeURIComponent(sQuery)) == 0)) {

      this._toggleHighlight(item, "to");
      //fire result item has been arrowed to event
      bAC_eTime.itemArrowToEvent.fire(this, item);
      bAC_eTime_currentSelection = itemData[0];
      bAC_eTime._elContent.scrollTop = ((18 * i) - 2);

      break;

      }

      }

      return true;

      }

      return {
      bDS: bDS,
      bAC_eTime: bAC_eTime

      };
      } ();

      </script>
      </div>

      </div>
      </div>

      </form>
      </div>

      </div>

      #popupbox {position:absolute;display:none;width:425px;overflow:visible;padding:0 0 0 0;z-index:255;
      border:1px solid #aaaaaa;background:#ffffff;}
      #popupbox_hd {width:100%;background:#cccccc;border-bottom:1px solid #333333;cursor:move;border-top:1px solid #cccccc;}
      #popupbox_bd {margin:10px 0px 0px 10px;}
      #popupbox_bd table td {vertical-align:top;}
      #popupbox .row {display:block;clear:both;width:100%;padding:1px 0px 1px 0px;}
      #popupbox .left {float:left;width:25%;}
      #popupbox .right {float:left;width:75%;}
      .yui-skin-sam .yui-ac
      {
      position: relative;
      font-size: 12px;
      font-family: Arial,Verdana, sans-serif;
      overflow:visible;
      }
      .yui-skin-sam .yui-ac-input
      {
      position:static;
      vertical-align:middle;
      z-index: 9001;
      width:6em; /* set width here or else widget will expand to fit its container */
      /*padding-bottom:20em; /* allow enough real estate for the container */
      }
      .yui-skin-sam .yui-ac-container
      {
      position: absolute;
      top: 1.6em;
      width: 100%;
      left:0px;
      }
      .yui-skin-sam .yui-ac-content
      {
      position: absolute;
      width: 100%;
      border: 1px solid #404040;
      background: #fff;
      z-index: 9050;
      /* set scrolling */
      max-height:16em;overflow:auto;overflow-x:hidden; /* set scrolling */
      _height:16em; /* ie6 */

      }
      .yui-skin-sam .yui-ac-shadow
      {
      /* position: absolute;*/
      position:static;
      margin: .3em;
      width: 100%;
      background: #000;
      -moz-opacity: .10;
      opacity: .10;
      filter: alpha(opacity=10);
      z-index: 9049;
      }
      .yui-skin-sam .yui-ac iframe
      {
      opacity: 0;
      filter: alpha(opacity=0);
      padding-right: .3em;
      padding-bottom: .3em;
      }
      .yui-skin-sam .yui-ac-content ul
      {
      margin: 0;
      padding: 0;
      width: 100%;
      }
      .yui-skin-sam .yui-ac-content li
      {
      margin: 0;
      padding: 2px 5px;
      cursor: default;
      white-space: nowrap;
      list-style: none;
      zoom: 1;
      }
      .yui-skin-sam .yui-ac-content li.yui-ac-prehighlight
      {
      /* background: #B3D4FF;*/
      }
      .yui-skin-sam .yui-ac-content li.yui-ac-highlight
      {
      background: #666666;
      color: #ffffff;
      }
      .matchedElement
      {
      font-weight:bold;
      display:-moz-inline-box;display:inline-block;background-color:#666666;
      }
    • kalyani_phadke
      YUi Autocomplete container is clipped when it descens below boundries of pop up div (absolute position and overflow:hidden).I have YUI AC on Pop up div which
      Message 2 of 2 , Aug 6 4:12 PM
        YUi Autocomplete container is clipped when it descens below boundries of pop up div (absolute position and overflow:hidden).I have YUI AC on Pop up div which is opened on button click.pls help.
      Your message has been successfully submitted and would be delivered to recipients shortly.