Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » NatTable » Tree full CSS styling of tree status column (Trying to apply CSS styling to the very left column of a tree)
Tree full CSS styling of tree status column [message #1739297] Fri, 29 July 2016 13:07 Go to next message
Lothar Lattermann is currently offline Lothar LattermannFriend
Messages: 26
Registered: July 2016
Junior Member
Tree full styling of tree status column

I am trying to apply styling to the most left column which holds the tree status (expanded, not expanded).

Specifically I would like to use "text-align: right" and to change the padding. However, while I can set the color or the cell-background-color I cannot change the alignment nor the padding via CSS. Furthermore I would like to show icons left of the tree status.

Looking at the examples provided with NatTable I am unable to find any clues on how to go about this. Using the tree-structure-painter attribute one can apply the values background, padding and tree:
- padding: allows to enable or disable padding but I can set a specific value.
- tree: switch between plus/minus or arrow pointing to the right/down to visualize status of tree
- background: enabled or disable that background of part holing the symbol is rendered as the rest of the cell

Does somebody have any hits or clues on how to go about this?
Re: Tree full CSS styling of tree status column [message #1739368 is a reply to message #1739297] Sat, 30 July 2016 21:29 Go to previous messageGo to next message
Dirk Fauth is currently offline Dirk FauthFriend
Messages: 2614
Registered: July 2012
Senior Member
There are several things to notice. In short, it is not possible to configure this via CSS, nor are some of the requested features possible.

But one by one:

1. padding
This actually works. And this is shown in the examples. As it is not working in your case, I assume you specified the tree-structure-painter for a label (e.g. TREE_COLUMN_CELL). But that is not working. The tree-structure-painter CSS property is only available on table level. This is also documented in the N&N of 1.4.

2. alignment
This also works. But maybe not as you expect. The tree state icons are always rendered left aligned. But the content can be aligned differently. I assume the issue is the same as above.

3. decoration icon left to the tree status
First, your assumption is wrong that the supported values for tree-structure-painter are only background, padding and tree. In theory you can add also other available painters like decorator. That would be the solution, but currently the TreeLayer doesn't respect a CellPainterDecorator while searching for the IndentedTreeImagePainter. For that I created a ticket and proposed a fix, so it is possible to create such a painter programmatically. But it won't work on CSS level as the tree-structure-painter needs to be specified on table level, the decorator value expects the decoration property, otherwise it fails to create it, and you definitely don't want the decoration on all columns.

https://bugs.eclipse.org/bugs/show_bug.cgi?id=498920
Re: Tree full CSS styling of tree status column [message #1739442 is a reply to message #1739368] Mon, 01 August 2016 14:51 Go to previous messageGo to next message
Lothar Lattermann is currently offline Lothar LattermannFriend
Messages: 26
Registered: July 2016
Junior Member
Hello Dirk,

thank you very much for taking the time to reply.

Dirk Fauth wrote on Sat, 30 July 2016 21:29
There are several things to notice. In short, it is not possible to configure this via CSS, nor are some of the requested features possible.

But one by one:

1. padding
This actually works. And this is shown in the examples. As it is not working in your case, I assume you specified the tree-structure-painter for a label (e.g. TREE_COLUMN_CELL). But that is not working. The tree-structure-painter CSS property is only available on table level. This is also documented in the N&N of 1.4.


Ah, I guess I am using the CSS wrong or at least was testing with values which are to big. If I use too big values for the padding the cells width and height seems to be using default values and no information is displayed (or so it appears). If the values are small the values are applied, i.e. cells are expanded, and information is placed correctly.

Yes, as by the TreeExample which uses the ".modern" CSS class I used the "tree-structure-painter: background padding tree;" configuration with the results described above.

public class TreeExample extends AbstractE4NatExamplePart {
    @PostConstruct
    public void postConstruct(Composite parent) {
        natTable.setData("org.eclipse.e4.ui.css.CssClassName", "modern");

/* MODERN CONFIGURATION */

.modern {
	tree-structure-painter: background padding tree;
	table-border-color: auto;
	cell-background-color: white;
	text-align: left;
	padding: 0 5;
}


Because of your reply I checked again and when I use the following values the padding seems to be ignored:

.modern {
	tree-structure-painter: background padding tree;
	table-border-color: auto;
	cell-background-color: white;
	text-align: left;
	row-height: auto; /* I added this line */
	padding: 10 10 10 10; /* I increased the values */
}


index.php/fa/26646/0/

Please note that the cells width/height is not adjusted at all and thus any information is actually hidden. In the example given when I manually increase the row height by maybe 2 pixels with the mouse the rows autoexpand(!) and all the information is there with the correct padding. Can you reproduce this behaviour? Is it me abusing CSS or is this a bug? If smaller values are used everything is working as expected. For example:
row-height: auto;
padding: 5 10 10 10; 

works for me.

index.php/fa/26645/0/

If "row-height: auto" is not given the information may be cut but is still visible to some extend, i.e. the information is being moved out of the visible part of the cell.

Quote:

The tree-structure-painter CSS property is only available on table level. This is also documented in the N&N of 1.4.


Mh...I am not sure what you mean by table level or rather what the consequences are. You mean that the styling is applied to late? Well, I will read the N&N again.

Quote:

2. alignment
This also works. But maybe not as you expect. The tree state icons are always rendered left aligned. But the content can be aligned differently. I assume the issue is the same as above.



Quote:

3. decoration icon left to the tree status
First, your assumption is wrong that the supported values for tree-structure-painter are only background, padding and tree. In theory you can add also other available painters like decorator. That would be the solution, but currently the TreeLayer doesn't respect a CellPainterDecorator while searching for the IndentedTreeImagePainter. For that I created a ticket and proposed a fix, so it is possible to create such a painter programmatically. But it won't work on CSS level as the tree-structure-painter needs to be specified on table level, the decorator value expects the decoration property, otherwise it fails to create it, and you definitely don't want the decoration on all columns.

https://bugs.eclipse.org/bugs/show_bug.cgi?id=498920


Thank you very much.
Re: Tree full CSS styling of tree status column [message #1739456 is a reply to message #1739442] Mon, 01 August 2016 19:07 Go to previous messageGo to next message
Dirk Fauth is currently offline Dirk FauthFriend
Messages: 2614
Registered: July 2012
Senior Member
Regarding die auto row height. I assume the issue is that the default row height is 20px. By specifying a padding of 10px on top and at the bottom, there is no space for the text painter. But the resizing is done by the text painter. As there is no space for the text painter, it is not triggered and therefore no resizing is done.

Feel free to create a ticket for this. I currently just don't have an idea on how to solve that.
Re: Tree full CSS styling of tree status column [message #1739500 is a reply to message #1739368] Tue, 02 August 2016 13:05 Go to previous messageGo to next message
Lothar Lattermann is currently offline Lothar LattermannFriend
Messages: 26
Registered: July 2016
Junior Member
Dirk Fauth wrote on Sat, 30 July 2016 21:29
There are several things to notice. In short, it is not possible to configure this via CSS, nor are some of the requested features possible.

But one by one:

1. padding
This actually works. And this is shown in the examples. As it is not working in your case, I assume you specified the tree-structure-painter for a label (e.g. TREE_COLUMN_CELL). But that is not working. The tree-structure-painter CSS property is only available on table level. This is also documented in the N&N of 1.4.

2. alignment
This also works. But maybe not as you expect. The tree state icons are always rendered left aligned. But the content can be aligned differently. I assume the issue is the same as above.

3. decoration icon left to the tree status
First, your assumption is wrong that the supported values for tree-structure-painter are only background, padding and tree. In theory you can add also other available painters like decorator. That would be the solution, but currently the TreeLayer doesn't respect a CellPainterDecorator while searching for the IndentedTreeImagePainter. For that I created a ticket and proposed a fix, so it is possible to create such a painter programmatically. But it won't work on CSS level as the tree-structure-painter needs to be specified on table level, the decorator value expects the decoration property, otherwise it fails to create it, and you definitely don't want the decoration on all columns.

https://bugs.eclipse.org/bugs/show_bug.cgi?id=498920


Regarding your second answer, mh...I think I might have stumbled on a bug in the example:
org.eclipse.nebula.widgets.nattable.examples.e4.part.TreeExample.postConstruct(Composite)
        // turn the auto configuration off as we want to add our header menu
        // configuration
        final NatTable natTable = new NatTable(container, gridLayer);


I get the behaviour you desribe if I change the code to:
org.eclipse.nebula.widgets.nattable.examples.e4.part.TreeExample.postConstruct(Composite)
        // turn the auto configuration off as we want to add our header menu
        // configuration
        final NatTable natTable = new NatTable(container, gridLayer, false);
        ....
        ....
        natTable.addConfiguration(new DefaultNatTableStyleConfiguration());
        natTable.configure();


Can you confirm this? Would it be ok if I provide a patch via Gerrit.

[Updated on: Tue, 02 August 2016 13:16]

Report message to a moderator

Re: Tree full CSS styling of tree status column [message #1739510 is a reply to message #1739500] Tue, 02 August 2016 14:44 Go to previous messageGo to next message
Dirk Fauth is currently offline Dirk FauthFriend
Messages: 2614
Registered: July 2012
Senior Member
You mean that the comment doesn't match the code? Yes, feel free to contribute.
Re: Tree full CSS styling of tree status column [message #1739513 is a reply to message #1739510] Tue, 02 August 2016 15:04 Go to previous messageGo to next message
Lothar Lattermann is currently offline Lothar LattermannFriend
Messages: 26
Registered: July 2016
Junior Member
No, I mean the styling applied is actually ignored if the auto configuration is enabled.

Thus the example does not work as an CSS example.

[Updated on: Tue, 02 August 2016 17:16]

Report message to a moderator

Re: Tree full CSS styling of tree status column [message #1739542 is a reply to message #1739513] Tue, 02 August 2016 18:42 Go to previous messageGo to next message
Dirk Fauth is currently offline Dirk FauthFriend
Messages: 2614
Registered: July 2012
Senior Member
The CSS styling doesn't work in that example? I created that example to demonstrate CSS Styling and tested your complaints there. So what exactly is not working?
Re: Tree full CSS styling of tree status column [message #1739554 is a reply to message #1739542] Tue, 02 August 2016 20:49 Go to previous messageGo to next message
Lothar Lattermann is currently offline Lothar LattermannFriend
Messages: 26
Registered: July 2016
Junior Member
This is about the original post in which I explained that I am not able to apply full CSS styling to the column holding the tree status.

You replied
Quote:

2. alignment
This also works. But maybe not as you expect. The tree state icons are always rendered left aligned. But the content can be aligned differently. I assume the issue is the same as above.


Alignment did not work for me in the context of the TreeExample.class and the column holding the tree status. I could not align the text at all. After your message I checked it again - it wasn't working. However, so I looked at the code and turning auto configuration off gives me the behavior you actually describe: text-align: left for example works.

What I am wondering or rather don't know is if the text alignment should be working with auto configuration on as well. However, in the example - for me - it does not. Is this a bug?

Would you be able to verify this? Just add text-align: left to the .modern CSS class and see what it does for you. If I am right it is not working. Once you turn auto configuration off (as the comment above the code actually suggest as well) it is working.

Please note:
- text alignment is actually not the only CSS that isn't working with auto configuration on, I had more issues with the example as well.
- in the the CSSExample.class auto configuration is turned off styling can be applied to more extend

Please let know if you need anymore information.
Re: Tree full CSS styling of tree status column [message #1739575 is a reply to message #1739554] Wed, 03 August 2016 06:15 Go to previous messageGo to next message
Dirk Fauth is currently offline Dirk FauthFriend
Messages: 2614
Registered: July 2012
Senior Member
The TreeLayer comes also with a default configuration that contains style bits. IIRC it also adds an alignment.

If I add the following to the css file, the alignment of the tree column is right aligned, just as you requested. It sets the alignment especially for the tree column.

.modern > .TREE_COLUMN_CELL {
	text-align: right;
}
Re: Tree full CSS styling of tree status column [message #1739717 is a reply to message #1739575] Thu, 04 August 2016 09:01 Go to previous messageGo to next message
Lothar Lattermann is currently offline Lothar LattermannFriend
Messages: 26
Registered: July 2016
Junior Member
Mh..TREE_COLUMN_CELL is not used in the TreeExample class or rather in the default.css file. But yes that works Smile
Re: Tree full CSS styling of tree status column [message #1739812 is a reply to message #1739717] Thu, 04 August 2016 16:25 Go to previous message
Dirk Fauth is currently offline Dirk FauthFriend
Messages: 2614
Registered: July 2012
Senior Member
TREE_COLUMN_CELL is a label that is added by the TreeLayer to the cells of the tree column. To better understand how to use CSS styling with the label child classes you should have a look at the default layer configurations.

But yes, that label is not mentioned in the example and also not in the css file, as it was not necessary.
Previous Topic:Localization
Next Topic:ZoomLayer
Goto Forum:
  


Current Time: Fri Sep 21 13:58:59 GMT 2018

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

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

Back to the top