Suggestion list shifts down the table below itself

HTML & CSS
1

The attached file uses JQuery for ajax search and gives a list of suggestions on typing. It works fine. I did put it on top of a listing table.
The problem is that when this search opens the suggestion listing, it shifts down the listing table below itself. How can I make this suggestion listing as transparent that when it opens it doesn’t affect the table below itself shifting it down? please help.

2

Hi,

It would be better if you could show a working copy of this as its hard to build a page from the zip you have attached without a lot of work.

If you don’t have a working copy then perhaps do a “View generated source” on your local machine after you have opened the suggestions list and post the generated source along with all the css. In that way the menu will already be open and it will just be a matter of adjusting the css.

It sounds like you just need to set the generated list to position:absolute so that it doesn’t interefere with the page content.

Maybe here:


.suggestionList {position:absolute;left:0;top:0;}/* adjust to suit */

It may be that the above is not the right element depending on the structure which is why it would be good to see the real thing :slight_smile:

3

Thanks for trying to help. Here is the image and I PMed you the source.
The change you made, did not help!

4

There was a typo in my post so if you copied and pasted it wouldn’t have worked anyway - sorry.

It should have been this:


.suggestionList {
	position:absolute;
	left:0;
	top:0;
}/* adjust to suit */

But you will still probably need to set a parent to position:relative for a stacking context but it does depend on how its placed. I’ll wait for the PM you said you sent (not arrived yet) and have a look tomorrow.

5

Yes, I understood and did the same change but still the same problem! Please advice.

6

I did email the code instead of PM. got it?

7

Hi,

That was only the source you sent and not the generated source which would be different as it would have the JavaScript applied in the html with the suggestion list html all showing.

Based on what you sent I’m guessing that eventually you will have a general list structure. You will need to wrap a parent div around that structure and apply position:relative to it.

I’ve added a wrap called <div class=“suggestion-wrap”> as follows.


<td valign="top">
	<div class="suggestion-wrap">
				<div class="suggestionsBox" id="suggestions"> <img src="search/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
						<ul class="suggestionList" id="autoSuggestionsList">
								<li>suggestions</li>
								<li>suggestions</li>
								<li>suggestions</li>
								<li>suggestions</li>
								<li>suggestions</li>
						</ul>
				</div>
		</div>
	</td>

Then amended the CSS as folows:


.suggestion-wrap {
	position:relative;
	width: 200px;
}
.suggestionsBox {
	position:absolute!important;
	left:0;
	top:0;
	margin:0;
	width: 200px;
	background-color: #212427;
	border: 2px solid #000;
	color: #fff;
}
.suggestionList {
	margin: 0;
	padding:0;
	list-style:none;
}
.suggestionList li {
	margin:0 3px 0 0;
	padding: 3px;
	cursor: pointer;
}
.suggestionList li:hover { background-color: #659CD8; }

The above code is working with the html you sent but I have no way of knowing if your js is going to modify the original html in a different manner than I expect.

Notwithstanding the above the answer is still to absolutely position the suggestion list and remove it from the flow. It may be that the js is adding inline styles into the html directly which means that you need to use !important n the css to over-ride it.

8

Sorry, it doesn’t work yet. Here is the attached image. Please test it once yourself before sending it here.

9

I did test it more than once and the code I gave is working fine with the limited resources you offered. Indeed even your picture above shows that the problem you were asking about is fixed:

The problem is that when this search opens the suggestion listing, it shifts down the listing table below itself.

I can clearly see from your image that the suggestion box no longer pushes the listing table downwards which solves the problem you asked about. It just looks like all you need to do is style the list itself properly now.

If you need more help with this then you are going to have to do a bit of work yourself and put up a working demo. You can use something like codepen (which is free) if you do not have access to an online version. It shouldn’t take you more than 30 minutes to put up a working demo of the problem and then we can really see what the issues are.

Please read this thread which explains how best we can help you.