CSS: ChangeAttributeOperation how to change tbody from table?

[raybiss]

Hi,
I have the following CSS that adds a button after a table and I'd like to set the valign attribute of the tbody element to "top".

Code: Select all

table: after {
    content: " "
 oxy_button(action, oxy_action(
name, 'AlignTop', 
description, 'valign=top', 
operation, 'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', 
arg-elementLocations, 'tbody', 
arg-name, 'valign', 
arg-value, 'top'
)
);
}

Unfortunately, the valign attribute is always added to the table and not the tbody.
I've tried many variations to get to the tbody element. //tbody, tgroup/tbody, ...
None of the variations worked. What am I missing?

While this would be great to have it working, it always shows a button at the bottom of every table in a topic.
What would be even better is to have the button appear when a table is selected or the selection is inside the table.
I stumbled on this interesting snippet while searching for an answer to the above issue.

Code: Select all

xref:-oxy-selection-inside, xref:-oxy-selected {
    -oxy-floating-toolbar: oxy_button(actionID, 'replace.xref.href');
}

Could this work in my case, floating a toolbar near the table and targeting the tbody element?
Looking forward to read your suggestions.

Thank you,
Raymond

[raybiss]

First part solved!
I only had to remove the "s" and replace

Code: Select all

arg-elementLocations, 'tbody',

by

Code: Select all

arg-elementLocation, 'tgroup/tbody',

About the second part.
Should I be able to use the -oxy-selection-inside and -oxy-floating-toolbar to change the button's location?

Code: Select all

table:-oxy-selection-inside, table:-oxy-selected {
    -oxy-floating-toolbar: ...

When I tried I did not see any button.

Thank you,
Raymond

[Radu]

Hi Raymond,

https://www.oxygenxml.com/doc/versions/ ... perty.html
The floating toolbar can indeed be used only in conjunction with the the -oxy-selected and -oxy-selection-inside pseudo-classes. But these pseuco classes are triggered only if you select the entire table or select content from inside the table. Did you select for example the entire <table> element and the floating toolbar did not appear?

Regards,
Radu

[raybiss]

Hi Radu,
Thanks for the rapid follow up.
Adding the button after the table is working:

Code: Select all

table:after {
    content: oxy_button(action, oxy_action(
name, 'AlignTop', 
operation, 'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', 
arg-elementLocation, 'tgroup/tbody', 
arg-name, 'valign', 
arg-value, 'top'
)
);
}

But I don't see any toolbar in this case, when selecting the table or something inside it.

Code: Select all

table:-oxy-selection-inside,
table:-oxy-selected {
    -oxy-floating-toolbar: oxy_button(action, oxy_action(
name, 'AlignTop', 
operation, 'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', 
arg-elementLocation, 'tgroup/tbody', 
arg-name, 'valign', 
arg-value, 'top'
)
);
}

I also tried the first two exemples on the page below but did not see a toolbar when selecting the paragraph or anything inside it.
https://www.oxygenxml.com/doc/versions/ ... perty.html
Running version 25 but not the last build yet.

Regards,
Raymond

[Radu]

Hello Raymond,

We have some floating toolbar specific selectors in the CSS stylesheet:

Code: Select all

OXYGEN_INSTALL_DIR/frameworks/dita/css/floating_toolbar/topic.css

and I think it interferes with your CSS selectors
For example there is a selector which shows a toolbar with a sort table action when the entire table element is selected.

If for example you increase the priority of your CSS selector by using the "!important" flag:

Code: Select all

table:-oxy-selected{
    -oxy-floating-toolbar: oxy_button(action, oxy_action(
name, 'AlignTop', 
operation, 'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', 
arg-elementLocation, 'tgroup/tbody', 
arg-name, 'valign', 
arg-value, 'top'
)
) !important;
}

then switch the Author mode to "Full tags" and select the <table> element, your button should now appear as a floating toolbar.

Regards,
Radu

[raybiss]

Hi Radu,

I think you're right about the interference.
I'll revert to "table: after" for now since I want to keep the default floating toolbars.

An interesting observation: I always thought selecting an element with the breadcrumb was the same as selecting it with the tag but it looks like it's not.
If I select the table with the tag I can see the floating toolbar but if I select the table through the breadcrumb, the toolbar does not appear.

Thank you very much for the great support you guys are providing.

Best regards,
Raymond

[Radu]

Hi Raymond,

The floating toolbar is useful when it's close to the mouse location. So it appears when you select using your mouse but not when using your keyboard or using the Outline/Breadcrumb. So this was an intentional decision on our side.

Regards,
Radu