3

I was looking for a JQuery dropdown bar (like the one in StackOverflow) when I'll find this that pointed to this jsfiddle demo. This is perfect except for one problem: when the page has scroll, it's possible that the user can't see the message.

I though that a simple "fixed" in the CSS will make the magic (demo here), but then a new problem appeared: the bar is not complete and centered. Now I'm blocked. What I need is the complete bar like in the first demo, but showed always even if page has scroll like in the second demo. Thanks.

Community
  • 1
  • 1
Ivan
  • 14,692
  • 17
  • 59
  • 96

2 Answers2

5

Add the following to your CSS declaration:

top: 0; 
left: 0;
width: 100%;

Demo here

Town
  • 14,706
  • 3
  • 48
  • 72
  • Great! Just a question: why "top" & "left"? It works perfect without top and left (at least in Firefox :) – Ivan Jul 14 '11 at 16:02
  • Not in Chrome! :) Setting `top` and `left` to `0` ensures that the element will always be positioned at the upper-left corner. If you've got Chrome, give that demo a go and you'll see the difference. – Town Jul 14 '11 at 16:05
2

You need 3 more css styles:

width:100%;
top:0;
left:0;
Lourens
  • 1,510
  • 1
  • 13
  • 27