Thanks Lex. I ended up doing exactly that, works great!

On Tuesday, December 18, 2012 4:52:14 PM UTC-6, Lex Berezhny wrote:
>
> You can create your own ListBox. Take a Button and attach an onclick event 
> that opens up a PopupPanel. You can then put whatever you want inside the 
> PopupPanel, then when an option is clicked you can update the text in the 
> button to reflect the selection.
>
> You can look at the pyjamas.ui.AutoComplete for an example. Or take a look 
> at the ReferenceInput class I wrote here: 
> https://github.com/damoti/damoti-client/blob/master/Input.py
>
> An AutoComplete is just a glorified dropdown. You can take the same 
> concept and dumb it down for some static values.
>
> The advantage of using the PopupPanel is that then you have absolute 
> freedom of how to style the contents of the drop down and you can make the 
> Button do/look anyway you want.
>
> If you're artistically/CSS challenged, you could try adapting the 
> Bootstrap button dropdown CSS to work with your custom Pyjs widget: 
> http://twitter.github.com/bootstrap/components.html#buttonDropdowns
>
> Basically in pyjs build up the same DOM that they are showing in the 
> example and then just include the bootstrap CSS in your HTML file and your 
> Pyjs widget will look like the bootstrap example. If you go that route you 
> won't even need to use the PopupPanel. The Bootstrap example does use 
> JavaScript to show/hide the drop down, but you can reverse engineer that 
> functionality very easily:
>
> Use your favorite browsers developer tools, then watch the DOM tree of the 
> drop down button as you click and unclick it. You'll see classes being 
> added and removed (to show/hide the drop down, etc). Then all you have to 
> do is replicate that in your pyjs code, attach the appropriate events and 
> set the appropriate classes/attributes/visibility. If that fails just look 
> at the Bootstrap javascript implementation but I think you should be able 
> to figure it out from just watching the DOM changes in your browser 
> developer tool panel.
>
> It would be cool if someone converted Bootstrap library to pyjs. It's not 
> hard, just time consuming. You'll learn A LOT!
>
> On Tue, Dec 18, 2012 at 5:18 PM, Matt <[email protected] <javascript:>> 
> wrote:
> >
> > Is there a way to style individual elements in a ListBox? I've seen some 
> people ask similar questions WRT GWT, but most answers are 'use a different 
> container' (none of which exist in Pyjamas). If there is another container 
> in Pyjamas that will work, I'm more than happy to switch.
> >
> > My end goal is to have a drop down containing bold, left-aligned, 
> unselectable section headers followed by right-aligned, selectable items. 
> All I can seem to get is standard text.
> >
> > I guess this boils down to two questions:
> > 1. How does one style a ListBox element?
> > 2. How does one make a ListBox element un-selectable?
> >
> > Thanks in advance!
> >
> > Matt
> >
> > --
> >  
> >  
> >  
>

-- 

--- 
You received this message because you are subscribed to the Google Groups 
"Pyjs.org Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.


Reply via email to