Oh I thought you wanted this globally.
I think JavaScript in Opening event for WebListbox is executed but the defaults set again after that. You need to put the ExecuteJavaScript on the Shown event.
That sort of works. Now it only displays the Top, right and bottom borders. Left borders are the only ones not showing.
I think you need to specify each of the 4 borders separately, setting them to no.
1 Like
Gilles, do you have any suggestion how to alter the JavaScript to do that. The Existing script doesn’t specify anything other than 'table-striped table-bordered'
Perhaps using jquery to set the border size to 0px? something like
$('#" + me.ControlID + "_table').css('border-right', '0px');
apply for all borders.
I’ll test this as soon as I get done with some stuff 
(untested code written here in the forum)
See CSS Borders (w3schools.com)
That explains how to set borders in CSS. You will find
The
border-styleproperty can have from one to four values (for the top border, right border, bottom border, and the left border).
It could be set as explained by @Hector_Marroquin (remains to be tested), each border has to be set. I think you may also modify the actual CSS for the WebListBox by getting the ID of the part you need to modify and next modifying that part - it is maybe explained in another thread of this forum.
The best result so far is using:
ExecuteJavaScript( "$('#" + me.ControlID + "_table').removeClass('table-striped table-bordered');" )
ExecuteJavaScript( "$('#" + me.ControlID + "_table').css('border-style', 'none');" )
But no matter what I try I cannot seem to get the horizontal borders, (top and bottom) to disappear. I’ve tried setting individual borders as none and also as 0 pixels but they never go away.
What happens if you use
.css('border-style', 'hidden');
?
CSS never crashes, it simply forget what’s wrong, no error.
I suggest you have a look at your Web Page using the tools in your browser to see the actual html behind the page, that can be interesting and help debug and learn.
There is no difference in how the listbox is displayed using ‘hidden’ instead of ‘none’
I’m sorry to say that I can’t find a way to remove the lines with JavaScript, I am no expert with that and it looks like I need to add border-top: 0px; for each cell (I manually added that code to one cell):
If you don’t mind removing the lines on all your WebListbox, then you can use this CSS in App HTML Header:
<style>
div.dataTables_scrollBody table tbody tr th, div.dataTables_scrollBody table tbody tr td {
border-top: none;
}
</style>
or
<style>
.table th, .table td { border-top: 0px ;}
</style>
You will get something like this (left with Shown event with JS, right without):
Haven’t tested a lot, that means I don’t know if this will break something else.
This works, but not from the shown event.
ExecuteJavaScript( "$('#" + me.ControlID + "').find('tbody td').css('border-top-width', 0);" )
Inspecting the process, Shown is raised and the styles are properly applied but then the cells are re-rendered by the framework which causes them to be removed. You could potentially setup a MutationObserver to detect changes in the DOM and re-apply the styles, but that can be quite complicated.
I’d recommend the following:
- Add this to App.HTMLHeader
<style>
.borderlessTable tbody td {
border-top-width: 0 !important;
}
</style>
- Add this to your ListBox’s Shown event:
ExecuteJavaScript( "$('#" + me.ControlID + "').addClass('borderlessTable');" )
Comparison:
You can then extend the CSS for the borderlessTable class in App.HTMLHeader to include everything else you’re doing via JavaScript.
3 Likes
Thanks @Anthony_G_Cyphers! I’ll give it a try when I get back in the office Monday.
If it doesn’t satisfy, what would be the method to get a borderless Graffiti Grid without alternating colors and no header that is not selectable. This is for display only and no UI interaction. It will be in a container control. (the possibility exists that the Grid/WebListbox will be long enough that it might need to scroll but that isn’t certain)
Using what I provided above, replace the App.HTMLHeader content with this to combine everything and remove all borders and backgrounds:
<style>
.borderlessTable,
.borderlessTable table,
.borderlessTable table td,
.borderlessTable table th,
.borderlessTable table tr,
.borderlessTable .dataTables_scrollHead,
.borderlessTable .dataTables_scrollBody {
border-color: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
</style>
Comparison with a red rectangle behind both ListBoxes:
2 Likes
If it doesn’t satisfy, what would be the method to get a borderless Graffiti Grid without alternating colors and no header that is not selectable.
Open a ticket if/when you get to that point and I’ll investigate that scenario.
Try this:
Public Sub RemoveXojoBorders(Extends wlb As WebListBox)
// To be called in the Shown event of the control (Me.RemoveXojoBorders)
var removeClasses as string = "$('#" + wlb.ControlID + "_table').removeClass('table-striped table-bordered no-footer');"
var borderRight as string = "$('#" + wlb.ControlID + "_table').prop(""style"").removeProperty(""border-right"");"
var borderTop as string = "$('#" + wlb.ControlID + "_table').prop(""style"").removeProperty(""border-top"");"
wlb.ExecuteJavaScript( removeClasses )
wlb.ExecuteJavaScript( borderTop )
wlb.ExecuteJavaScript( borderRight )
End Sub
They should really make customizing weblistboxes a bit easier… the output html code looks like a mess and what should be relatively fast to customize is a chore.
2 Likes
This works great Anthony!!! You are a genius.
There is a momentary flash of visible borders when the page opens which I’ll attribute to being a windows rendering problem, but I can live with that and the users probably won’t notice. It shows that even though I have the WebListbox hidden until it is populated. It probably wouldn’t fkash the borders if the framework didn’t try to draw them in the first place. I’m going to file a feature request for these items as switches in the UI along with not selectable.
Thanks Again!!!
4 Likes
Happy to help!
4 Likes
It’s truly amazing how much time people are willing to spend in order to find work-arounds for things that existed for years in Web 1. All this CSS and Javascript effort to accomplish things that should be easily done in Xojo itself… all to make Xojo web look more like a webapp. 
2 Likes