How do I show a scrollable list in jQuery Dialog?
+1
A:
We'll you really don't need jQuery at all for that, try putting your list inside a container that is too small for it and set it's overflow property in the css to scroll.
Your HTML could be:
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
and your CSS can look like:
.container {
height:100px;
overflow:scroll;
}
Joseph Silvashy
2010-03-10 04:00:24
I did this with jQuery using Dialog but the list doesnt show...
T McKeown
2010-03-10 04:04:01
It's tough to see the issue, can you tell me what Dialog box you are using? Do you mean the type of dialog box the browser implements? If that's the case then you're out of luck, you have no control over that one.If you are talking about some plugin then point us in that direction or maybe post some of your code!
Joseph Silvashy
2010-03-10 04:05:41
sorry for not posting code... the code is at work but here is the basic structure... the problem is when I use jQuery's dialog call for the div I cant see the list items....//javascript here:$("dialog").open( 'dialog', options.. etc... );<html><div id="dialog"> <li>item 1</li> <li>item 2</li> <li>item 3</li></div></html>
T McKeown
2010-03-10 04:11:32
you are missing the <ul></ul> tags
henchman
2010-03-10 04:16:36
i hope thats all it is... It seems like lists inside a jquery dialog is no big deal so I guess it's prolly the mark up.Are there any sites that show dialogs with lists? I see a lot of examples of each but not with both.
T McKeown
2010-03-10 04:18:31
Doesn't work.... here is my code, the result is a modal dialog that has nothing displayed... even if i just remove the <ul> and type text, nothing shows!....$("#products").dialog({ bgiframe: true, height: 340, modal: true });<div id="products" style="visibility: hidden;" title="Products"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div>
T McKeown
2010-03-10 04:30:48
I dont know how to use this site correctly... i cant seem to paste the code with carriage returns.
T McKeown
2010-03-10 04:32:13
Ok... So the problem is that I put the style="visibility: hidden" on the div... how do I override this at runtime using jquerys dialog.open()???
T McKeown
2010-03-10 04:43:09
I had to set the visibility to visible thru js.
T McKeown
2010-03-10 04:51:14
jQuery doesn't have a `dialogue` method, I think you may be using jQuery UI, or perhaps we are having some type of language mismatch. As for your dialogue box, try setting is' position to `relative` first and see where your box is positioned. Otherwise post a link to the plugin you are using.
Joseph Silvashy
2010-03-10 10:14:55
Considering it looks like you call the plugin's "dialog" option, (which is likely a hash) I'll assume you are using a plugin, and in that case, I't almost 100% guaranteed a CSS problem colliding with the CSS in the said plugin.
Joseph Silvashy
2010-03-10 10:17:17
A:
henchman
2010-03-10 04:00:51
In a dialog? for some reason whenever i put a list in a dialog I never get anything to show, the list isn't visible.
T McKeown
2010-03-10 04:02:50
yes, like a grid. I can handle the selection (via hyperlink to call js). I just cant get any list to show when I put it in a dialog div..Would it be a div for the dialog and a div for the list? or just use <li>items</li>
T McKeown
2010-03-10 04:06:45
i you like to have it scrollable, then you will have to use Joseph's solution. put it in the div which is being .dialog'ed :)
henchman
2010-03-10 04:10:50