How to remove border from spreadsheet?

Flow
1

How do I remove the border from a spreadsheet?

image
image1015×1035 53.3 KB

I tried adding this to main-layout.css:

div .v-spreadsheet {
border: 0 !important;
}

2

The respective div is part of the shadow dom and thus not accessible via “normal” css. Unfortunately it neither has a part attribute, therefore you will have to use shadow dom styling.

In this case, you need to create a file “vaadin-spreadsheet.css” inside the folder structure “your-theme/components/”. This will then be applied to the shadow dom styling of the spreadsheet. For more details, check the documentation.

.../frontend/themes/your-theme/components/vaadin-spreadsheet.css

div .v-spreadsheet {
    border: 0 none; /*no !important necessary*/
}
1 Like
3

Thanks, but I still can’t make it work, I have a feeling there is a step missing, but I can’t see what it is.

I have tried with a
frontend\themes\my-spreadsheet-app\components\vaadin-spreadsheet.css

containing different CSS like these:

div .v-spreadsheet {
border: 0;
}

and after doing a
spreadsheet.addClassName(“no-border”);

that showed up in the browsers debugger as
<vaadin-spreadsheet class=“hidefunctionbar hidetabsheet no-border” … >

I tried this, with and without the div

:host(.no-border) div .v-spreadsheet {
border: 0 !important;
}

Following the documentation to Disable Pre-Compiled Frontend Bundle

I have added both
vaadin.frontend.hotdeploy=true

to application.properties

and

< build>

    <defaultGoal>spring-boot:run</defaultGoal>
    <plugins>
        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>${vaadin.version}</version>
            <executions>
                <execution>
                    <goals>
                        <goal>prepare-frontend</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <frontendHotdeploy>true</frontendHotdeploy>
            </configuration>
        </plugin>
    </plugins>

</build>

to pom.xml

finally I have checked that I get a file like this to apply the vaadin-spreadsheet.css

frontend\generated\theme-my-spreadsheet-app.components.generated.js

with this content:

import { unsafeCSS, registerStyles } from ‘@vaadin/vaadin-themable-mixin/register-styles’;

import vaadinSpreadsheetCss from ‘themes/my-spreadsheet-app/components/vaadin-spreadsheet.css?inline’;

if (!document[‘_vaadintheme_my-spreadsheet-app_componentCss’]) {
registerStyles(
‘vaadin-spreadsheet’,
unsafeCSS(vaadinSpreadsheetCss.toString())
);

document[‘_vaadintheme_my-spreadsheet-app_componentCss’] = true;
}

if (import.meta.hot) {
import.meta.hot.accept((module) => {
window.location.reload();
});
}

Console output

I get this in the console confirming the above:

: Started Vite. Time: 1423ms
: ➜ Local: http://127.0.0.1:52885/VAADIN/
: Application running at http://localhost:8090/
:
: [TypeScript] Found 0 errors. Watching for file changes.
: 20.18.53 [vite] (client) hmr update /generated/theme-my-spreadsheet-app.components.generated.js

4

Unfortunatelly this does not work as vaadin-spreadsheet does not implement ThemableMixin.

See https://vaadin.com/docs/latest/components/spreadsheet#limitations

“No support for theming the component the same way as other Vaadin components.”

Currently the best way to customize the Spreadsheet looks is to set it to Lumo theme mode and use Lumo CSS variables to customize. However I am not sure if it is possible to disable just the outer border with that, but you can try.

2 Likes
5

Yeah no unfortunately the approach proposed by @Stefan.27 won’t work, because the Spreadsheet component doesn’t support shadow DOM CSS injection, unlike other Vaadin components.

And it also doesn’t expose part names like other Vaadin components.

(The docs express this rather vaguely as “No support for theming the component the same way as other Vaadin components.”)

So unfortunately it’s a bit awkward as you’ll need to handle the injection of css into the shdow dom “manually”, like so:

Element element = new Element("style");
element.setText("""
            .v-spreadsheet {
                border: none;
            }
        """);
spreadsheet.getElement().appendVirtualChild(element);
spreadsheet.getElement().executeJs("this.shadowRoot.appendChild($0)", element);

(Note that the selector you tried to use is also incorrect as it matches a classname v-spreadsheet inside a div, rather than a div with the classname v-spreadsheet)

2 Likes
6

Thanks :star_struck:

It works now.
I had to add !important to Rolf 's code to avoid it being overwritten by the standard
v-spreadsheet class.

Good point about the CSS selector.

Vaadin surely is a great product.

Happy new year