Spacing in Routerlink not possible

Flow
1

I have a RouterLink with Icon and Text
I want define the Spacing betwenn Icon and Text

	public void addView(Class<? extends Component> viewClass, String caption, Icon icon) {
		Tab tab = new Tab();
		RouterLink routerLink = new RouterLink(null, viewClass);
		routerLink.setClassName("main-layout__left-nav-item");
		routerLink.add(icon);
		routerLink.add(new Span("   "));
		routerLink.add(new Span(caption));
		tab.add(routerLink);
		tabs.add(tab);
	}

The following Code with “Blancs” has no Effekt

routerLink.add(new Span("   "));

When i use the following Code with “----” then it works

routerLink.add(new Span("----"));

Why are here Blancs not working?

When i use the HTML Symbolfor Blanc (nsbp &-;) it is also not working.

2

Maybe you need to use white-space: pre;: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

3

This is my CSS.

How can i add here white-space: pre;

        .main-layout__left-nav-item {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            padding: 4px 8px;
            cursor: pointer;
            transition: 0.3s color, 0.3s transform;
            will-change: transform;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-size: var(--lumo-font-size-s);
            color: var(--lumo-secondary-text-color);
            font-weight: 500;
            line-height: 1.3;
        }

The problem is that it must be between icon and text.

4

Hi,
i have solved it

i only added white-space: pre; to the css

        .main-layout__left-nav-item {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            padding: 4px 8px;
            cursor: pointer;
            transition: 0.3s color, 0.3s transform;
            will-change: transform;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-size: var(--lumo-font-size-s);
            color: var(--lumo-secondary-text-color);
            font-weight: 500;
            line-height: 1.3;
            white-space: pre;
        }

Thanks for your help

5

Great to hear you got it working :slight_smile: