Does anyone know how to style a Web2 Weblistbox so that it is completely borderless and set it so that there is no alternating row color?
I’m sorry I don’t have time right now to dig the CSS needed, have you seen this post? I hope that helps, if not I will take a look tomorrow.
This is what I got so far, it kinda works except for the fact that the selection color is not working. Perhaps one of the CSS gurus can help further
<style>
.table-bordered,
.table-bordered thead td, .table-bordered thead th,
.table-bordered td, .table-bordered th,
.dataTables_wrapper.no-footer .dataTables_scrollBody {
border: 0 !important;
background-color : white !important;
color : black !important;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
background-color : white !important;
color : black !important;
}
</style>
Notice how Row 1 (The selected row ) has a color of #FFFFFF . That’s where I’m stuck at
Hector, unfortunately this will change the table style globally. What I need is to eliminate borders and alternating colors on individual WebListboxes. I already have global settings that I am happy with that uses a gradient in the headings that matches my Bootstrap theme.
For my purposes I am displaying a WebListbox without a heading, it is not enable and not selectable. I also need it to not have borders or alternating colors. It is for a data summary for a dashboard page. I have tried a line of JavaScript code I found, but it fails to remove the borders and alternating colors when placed in the WebListbox opening event.
// Remove borders and alternating row colors
ExecuteJavaScript( "$('#" + me.ControlID + "_table').removeClass('table-striped table-bordered');" )
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.