Eclipse Community Forums: Eclipse Scout » Sticky columns in tablea

Help

Home

Home » Eclipse Projects » Eclipse Scout » Sticky columns in tablea

Show: Today's Messages :: Show Polls :: Message Navigator

Sticky columns in tablea [message #1839062]

Fri, 12 March 2021 08:28

Mr Robot

Messages: 71
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

Report message to a moderator

Re: Sticky columns in tablea [message #1839063 is a reply to message #1839062]

Fri, 12 March 2021 08:35

Andre Wegmueller

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

Report message to a moderator

Re: Sticky columns in tablea [message #1839065 is a reply to message #1839063]

Fri, 12 March 2021 11:05

Mr Robot

Messages: 71
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

Report message to a moderator

Re: Sticky columns in tablea [message #1839070 is a reply to message #1839065]

Fri, 12 March 2021 12:18

Mr Robot

Messages: 71
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)

Report message to a moderator

Previous Topic:	REST frontend questions
Next Topic:	PlannerField in 6.0

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Sat Jul 27 05:44:55 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter