Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Eclipse Scout » Sticky columns in tablea
Sticky columns in tablea [message #1839062] Fri, 12 March 2021 08:28 Go to next message
Mr Robot is currently offline Mr RobotFriend
Messages: 68
Registered: March 2020
Member
Hello,

maybe it is not Scout related question. But I need to make first column sticky (always visible on horizontal scroll) when scrolling horizontaly.

I started that task by applying css class on header cell and all table cells of first column.

.sticky-column {
    position:sticky;
    left: 0;
}


Do I need to apply some additional css, content is not rendered ok. Has anyone tried to do this?

Thanks
Re: Sticky columns in tablea [message #1839063 is a reply to message #1839062] Fri, 12 March 2021 08:35 Go to previous messageGo to next message
Andre Wegmueller is currently offline Andre WegmuellerFriend
Messages: 204
Registered: September 2012
Location: Baden-Dättwil, Switzerla...
Senior Member
Hello Mr Robot

My answer from last year is still valid: https://www.eclipse.org/forums/index.php/t/461554/

I guess CSS alone won't do the trick. It would require complex enhancements in Scout's table widget.

Cheers,
André


Eclipse Scout Homepage | Documentation | GitHub
Re: Sticky columns in tablea [message #1839065 is a reply to message #1839063] Fri, 12 March 2021 11:05 Go to previous messageGo to next message
Mr Robot is currently offline Mr RobotFriend
Messages: 68
Registered: March 2020
Member
I managed to make first column sticky.

But I have a problem.

To make column sticky, I need to add overflow:unset to parent element which is table-row.

If I add that css style in execDecorateRow, I cannot work with cells anymore. I am using css to select cell when clicked (something like Excel table).

When cell is clicked. code that adds css to cell does not append css class to cell anymore. (cell.getCssClass() does not contain added css class. )

Is there an option to add style overflow:unset to my custom table (not all tables in application) using less or using jQuery?

Thanks
Re: Sticky columns in tablea [message #1839070 is a reply to message #1839065] Fri, 12 March 2021 12:18 Go to previous message
Mr Robot is currently offline Mr RobotFriend
Messages: 68
Registered: March 2020
Member
I managed to make it.

Here are steps:
1) Name your table by adding cssClass.

@Override
protected String getConfiguredCssClass() {
        return "planer-tablica";
}


With content:
 .planer-tablica .table-row{
  overflow:unset ;
  }


Find first column in table and in execDecorateCell assign cssClass:
cell.setCssClass("day-column");


Where day-column has:
.day-column {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index:999;
  background-color:#efefef;
}


Now first column has position sticky. But to make it work, parent element must have overflow:unset; to make it work. Parent element is table-row.
We make that by adding class to table (planer-tablica)
Previous Topic:REST frontend questions
Next Topic:PlannerField in 6.0
Goto Forum:
  


Current Time: Wed Feb 28 15:13:41 GMT 2024

Powered by FUDForum. Page generated in 0.02473 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top