Rendering <g:ui_slushbucket/> - UI Pages in Geneva

[andrew_lawlor]

Has anyone come up with an attractive way to render <g:ui_slushbucket/> objects in Geneva? We have a few UI Pages that utilize them, and they display absolutely wonky without any formatting. Some of the older examples I've found - using pure HTML - don't render well in Geneva either. See Creating a Custom Slushbucket Popup Dialog - ServiceNow Guru

I've applied CSS in an attempt to correct the issue, but I'm having trouble getting it to render acceptably well across different screen sizes. That's definitely not my strong suit.

Does anyone have any generalized examples they would be willing to share?

Thanks!

[TrevorK]

Here is something one of our guys did for a slushbucket in Geneva:

This is using the ui_slushbucket macro, some custom HTML and some custom CSS. Overall, not much different than out of the box so I'm not sure if it's what you're looking for - it doesn't look "absolutely wonky" to me, but not sure it meets your criteria of "attractive".

SamuelTse - this one was all you so are you able to give him a hand if he is looking for something similar to what you did here? Even though it's relatively simple, I just don't know all the reasoning that went behind your code here so I don't want to miss anything you went over.

[SamuelTse · Accepted solution]

There is really no trick or special CSS needed to make it look "normal". I would like to know what you meant by "wonky". If you are referring to the size of the select list on both sides of the slushbucket, all you have to do is to put your slushbucket inside a table cell or a DIV tag and set the size of it. I used TABLE in Trevor's example. I just set the table width to 800px and the slushbucket adjusts accordingly. I don't see why you cannot use percentage if responsive is important to you.

Using the example in the linked you provided, if you change this line:

 <TABLE BORDER="0">

to:

 <TABLE BORDER="0" width="800px">

Then you will see the difference of the slushbucket list.

Of course, in Trevor's screenshot, I added the filter dropdown and the detail information of the selected item (below the slushbucket), but that's fairly straightforward in terms of how they look.

I hope it helps

Sam

[andrew_lawlor]

Thanks to both of you - it seems I was really over-complicating things. The simple table layout works out just fine with an explicit width!