I just built a test Web App that implements the bullet points above:
http://campsoftware.com/files/LongTerm/Xojo/ListContainers.zip
After clicking the button the calls the jQuery moving of the WebContainer to the WebListbox Cell, I can see that it did move as shown in the picture below. But it’s not actually showing in the WebListbox Cell. Any idea what I did wrong or I’m missing?
[quote=421634:@Hal Gumbert]I just built a test Web App that implements the bullet points above:
http://campsoftware.com/files/LongTerm/Xojo/ListContainers.zip
After clicking the button the calls the jQuery moving of the WebContainer to the WebListbox Cell, I can see that it did move as shown in the picture below. But it’s not actually showing in the WebListbox Cell. Any idea what I did wrong or I’m missing?
[/quote]
Yeah let me see if I can find my example project. From what I recall I had to change the positioning attributes as well, moving it alone was not sufficient.
–UPDATE –
ButtonAction
Sub Action() Handles Action
dim cc as new CCTest3
cc.EmbedWithin(self, 0, 0, cc.width, cc.height)
ListBox1.cellPrependControl(cc, 0, 0)
currentControl = cc
End Sub
cellPrependControl Method
Public Sub cellPrependControl(extends lb as WebListBox, wc as webcontrol, row as integer, column as integer)
dim script() as string
script.append wc.JqeurySelector+".detach().prependTo("+lb.cellSelector(row, column)+");"
script.append wc.JqeurySelector+".css('position','relative');"
lb.ExecuteJavaScript(join(script, EndOfLine.Windows))
wc.Left = 0
wc.Top = 0
End Sub
Here’s an example of embedding a Raw Checkbox into a WebListBox and hooking it up to the WebControlWrapper for eventing
https://www.dropbox.com/s/km6xhef84nlv4io/WebCheckBoxRaw.xojo_binary_project
Here’s an example of embedding a containerControl into a WebListBox
https://www.dropbox.com/s/t7hpy00tpu0mdwu/EmbedCCinListbox.xojo_binary_project
Here’s an example of a column based responsive grid to avoid the Listbox altogether
https://www.dropbox.com/s/io7zw55homxykjg/ResponsiveGrid-2018-04-13.zip
Brock, you rock. THANK YOU very much. Being able to embed more objects into WebListBox is huge!
@Greg O’Lone , do you think <https://xojo.com/issue/54683> is something worth adding to Xojo so we don’t have to mess with JavaScript?
[quote=421682:@Hal Gumbert]Brock, you rock. THANK YOU very much. Being able to embed more objects into WebListBox is huge!
@Greg O’Lone , do you think <https://xojo.com/issue/54683> is something worth adding to Xojo so we don’t have to mess with JavaScript?[/quote]
You bet! I’ve definitely had to hack and build out tons of custom controls for the web framework. I’ll often build it once though and reuse it all over. Might as well share with you all! I’m also pretty optimistic that the new WebFramework will address our concerns of responsive layouts (Hopefully with a column based ContainerList in the mix).
On a side note it is really annoying that the apostrophe in Greg’s name makes it so you can’t tag him properly…
@Brock Nash , your suggestions rocked to get the WebContainer into the WebListBox.
Have you had problems with being able to enter into the WebTextField using this technique? I can successfully click the button which shows a msgbox, but when I click the WebTextField it ignores my clicks. I tried to set the z-index, of my cell raw div, the textfield and the textfield_inner, but that made no difference.
I updated my example file which shows the issue.
http://campsoftware.com/files/LongTerm/Xojo/WebListboxContainers2019-01-18/ListContainers.xojo_binary_project.zip
Did some more testing.
Weird that the text field can’t get focus.
Seems like the Listbox SelectionChange event is intercepting the click, but TextField.MouseDown gets a click.
I set TextField.MouseDown to call me.SetFocus and now the text field can get the focus, but the cursor goes to the left of the input, ignoring where the user clicks.
Somehow I need to disable the Listbox from handling SelectionChanged, but it fires even without a defined event probably so it can change the style…
Updated example file: http://campsoftware.com/files/LongTerm/Xojo/WebListboxContainers2019-01-18/ListContainers.xojo_binary_project.zip
Thank you so much @Brock Nash and @Tim Parnell with your help on getting WebContainers into WebListboxes!
Tim found how to disable the Listbox click events that was preventing the controls in the container from getting clicks!
// Remove the Listbox Click Events
ExecuteJavaScript("document.getElementById('" + Listbox1.ControlID + "').removeEventListener('mousedown', Xojo.input.begin);")
I still need to test on Mobile to see if there are Listbox touch events to remove.
Updated the example file to no longer need jQuery, added a loop of containers, and simplified the code:
http://campsoftware.com/files/LongTerm/Xojo/WebListboxContainers2019-01-18/ListContainers.xojo_binary_project.zip
I added it to my Top Cases…