Search code examples
sveltesappersapui5

Why it does not know the same content?

I've build an example app in svelte and sapper with same ui and figure out, the content appears different:

Svelte enter image description here

Sapper enter image description here

I've checked the css, but it should not be any differences.
The code from https://gitlab.com/oceanstack/ui5-sapper and https://gitlab.com/oceanstack/ui5-svelte

Solution

  • The problem is your HTML is not the same.

    Svelte:

    <ui5-label id="myLabel" for="myInput" required show-colon="">First name</ui5-label>

    Sapper:

    <ui5-label id="myLabel" for="myInput" show-colon="">First name</ui5-label>

    Notice that Svelte has the required attribute and Sapper does not.

    If you go into the browser development tools on the Sapper page and add the required attribute to the label, you'll notice that all of a sudden, the ellipsis is removed and that your labels will match.