www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS - auto look up box in tool bar

  1. #1
    Join Date
    Aug 2010
    Posts
    14

    CSS - auto look up box in tool bar

    Hi,

    Ok firstly i am not even sure that this is possible, but thought i would ask anyway.

    I have started building a toolbar using conduit and one of the features they have is you can include pages from your website, so i have put together a single text field as a seach facility that has an auto look up facility so that when somebody types in to the search field a drop down box displays below the search field with matching products from my database.

    Now this works fine as a webpage, the only problem is when i include that page in to the tool bar ( through some form of iframe or something along those lines)
    The drop down box seems to drop down behind my browser pages.

    I guess my first question is, is it actually possible to get the drop down box to appear on top of the browser pages.

    And if so what would i need to modify here to make it work.

    Code:
    .suggestionsBox {
    		position: absolute;
    		left: 30px;
    		margin: 10px 0px 0px 0px;
    		width: 200px;
    		background-color: #212427;
    		-moz-border-radius: 7px;
    		-webkit-border-radius: 7px;
    		border: 2px solid #000;	
    		color: #fff;
    	}
    	
    	.suggestionList {
    		margin: 0px;
    		padding: 0px;
    	}
    	
    	.suggestionList li {
    		
    		margin: 0px 0px 3px 0px;
    		padding: 3px;
    		cursor: pointer;
    	}
    	
    	.suggestionList li:hover {
    		background-color: #659CD8;
    	}
    Any help wpuld be appreciated.

    Stn

  2. #2
    Join Date
    May 2006
    Posts
    170
    Assuming you want to put your dropdown div on the top of the layer so the css would be

    .dropdown{
    position:absolute or relative;/* change as u want, they are totaly different*/
    z-index:999/* you can change the value*/
    }

    it'd be great if u can post you code or a link




    }
    Last edited by lohumihem; 08-04-2010 at 01:20 AM.

  3. #3
    Join Date
    Aug 2010
    Posts
    14
    Hi Sorry,

    The drop down box as i keep calling it is actually called suggestion box in the code posted previously.

  4. #4
    Join Date
    Aug 2010
    Posts
    14
    Also i can'really supply a link as it for a tollbar however the code for the page is:

    http://www.pestcontrolonline.com/toolbar/toolbar.php which works fine, it's just when it is used in the toolbar the suggestion box doesn't sit on top of the browser pages and disapears behind them.

    Thanks

    Stn

  5. #5
    Join Date
    May 2006
    Posts
    170
    .suggestionsBox {
    position: absolute;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #212427;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000;
    color: #fff;
    z-index:999999;

    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles