Tables initial column sizes only works with percentages about elements HOT 9 CLOSED

I'm pretty sure I was playing around with css for the badge at the time so that would be the cause for any odd appearance to it. If you need it I can try to replicate it but like I said, I switched to a flat tree view which works great for my purpose. I am actually using it as a list control to display a list of vscode installed extensions and it is working just fine for that. That is why I wanted to have the first item selected on startup as I am displaying the first extensions info to the right when the webview initially loads. I was actually able to set it as selected by sending a click like this...

document.querySelector("#extension-tree").shadowRoot.querySelector("div > ul > li:nth-child(1) > div > span").click();

As you suggested, adding treeData[0].selected = true; to the tree items data seems to work just as well for me and it is much easier to read, so I will use that. I am using an action icon to toggle the selection of extensions with a leading icon for the selection status. I removed the tab control all together as it only had 2 tabs and I realized I can display everything on one page anyways. Here is a quick screenshot of how I'm using this (Still needs a lot of work yet)...

from elements.

It seems to work. The only deceptive thing is that the px values will be converted to percentage values, to keep the same ratio when the table is resized. It seemed like a good idea. I dont't know, maybe it isn't.

from elements.

Strange, does not seem to work for me. No matter what I set them to, they are all evenly spaced, almost like they are all set to auto. No big deal as percentages work just fine for me. Using percentages actually makes more sense for a table anyways, at least in my opinion.

from elements.

Can you create a reproducible example? Which version do you use?

from elements.

I think I know what is causing the issue. I had the table in a tab and this is what I get using '100px'

And using '10%' I get this..

I tried it without the tabs and px is working ok like that.
This was using the example html for Initial Column Widths.

from elements.

I actually switched to using a flat tree to display my items as it seems more appropriate for my purpose. Quick question about the tree element, is there a method to set an item as selected for the initial display? Another related question, when using action buttons is there as option to select the item as well? Currently the item with the clicked action button is not selected.

from elements.

I think I know what is causing the issue. I had the table in a tab and this is what I get using '100px'...

Hi,

Somehow I didn't notice your comment. Thank you for the example, I will try this. That badge looks weird, were you able to fix it? If weren't please show me the HTML markup you used. It should work without any additional css.

from elements.

I actually switched to using a flat tree to display my items as it seems more appropriate for my purpose. Quick question about the tree element, is there a method to set an item as selected for the initial display? Another related question, when using action buttons is there as option to select the item as well? Currently the item with the clicked action button is not selected.

An item can be marked as selected in the tree data, so you should replace the whole tree data with a modified new one. Yes, it sounds hacky and it is. Currentyl, I don't have any better idea.

from elements.

Thank you for your effort. Btw., I want to rewrite the tree component. It will be more flexible than now.

from elements.