Known Issue: Inline Design Elements are Not Fully Supported in the Visual Builder

Please note: this article is old and dedicated to ShortPoint Visual Builder Beta early versions. Starting with ShortPoint SPFx 8.0.16.xx version, the inline Design Elements are being migrated smoothly when switching to Visual Builder. 

Make sure to upgrade your ShortPoint version to 8.0.16.xx and later. Continue to these solution articles:

• To know how to upgrade to the Beta version: ShortPoint SPFx Sandbox Mode Feature. Beta version is available. 
• To know more about inline Design Elements: Introducing Inline Design Elements Feature for ShortPoint Visual Builder and Wireframe Builder.

Inline Design Elements are not fully supported in the Visual Builder. You may notice this while migrating your pages into Visual Builder.

In this article, we will explain how you can adjust your contents after the migration.

TABLE OF CONTENTS

• This article is for you if
• Issue
• Reason
• Solutions
  • Solution 1. Insert the inline Design Element from the text editor options of the Text Design Element
  • Solution 2. Insert the inline Design Element on a new line

This article is for you if

• You have the ShortPoint SPFx Visual Builder version 8.0.x.xx or later.
• You use Office 365 (SharePoint Online) or SharePoint 2019 environment.
• You are a ShortPoint user with an active license.

Issue

If you have an inline Design Element in between two text parts, after the page migration, it will appear on a new line between two Text Design Elements. This is how it will look like:

• In the edit mode of a content-holder Design Element, Content tab:

• In the Wireframe Builder:

• In the Visual Builder:

• In the view mode:

Note:
ShortPoint has 10 inline Design Elements in total. These are: Abbreviation, Button, Dropcap, Emphasis, Icon, Label, Link, Popover, Tooltip, Small.

Reason

The inline Design Elements cannot be added in between other text parts in Visual Builder.

Solutions

There are two possible options on how to deal with the inline Design Elements, if you need to use them in the middle of the text:

• Solution 1. Insert the inline Design Element from the text editor options of the Text Design Element

Select a part of the text and convert it to whatever inline Design Element you want. This way you can also update the migrated page content in case you need to have the inline Design Elements in between the text parts.

This is how it will look like:

And in the view mode:

Note:
If you would like to know how to use the inline Design Elements inside the Text Design Element, please, continue to our solution article: Introducing Inline Design Elements Feature for Visual Builder and Wireframe Builder

• Solution 2. Insert the inline Design Element on a new line

Another option is the default migration behavior: to add an inline Design Element on a new line, so it will appear between two Text Design Elements.

This is how it will look like:

And in the view mode:

Please see the steps below:

Step 1: Add the first part of text to the Design Element's content

Edit the page. There are two ways of adding the text content:

• Option 1. Add a Text Design Element inside the content-holder Design Element

Click the Insert button inside the content-holder Design Element:

Select Text Design Element from the grid:

Inside the Content tab add the text content (1) and click Insert button (2):

• Option 2. From the Content tab of the content-holder Design Element

Open the settings of the content-holder Design Element by clicking the cog wheel icon:

Switch to the Content tab and add the first part of the text content you would like to have inside the content-holder Design Element:

Click Update.

Note:

In both cases inserted text will still be added as a Text Design Element:



To learn more about the text editing experience in Wireframe Builder and Visual Builder, please check this solution article: Text Editing Experience in Visual Builder and Wireframe Builder.

Step 2: Insert the inline Design Element

Click the Insert button inside the content-holder Design Element:

Select from the grid the inline Design Element you would like to use (for example, a Link):

Add the Design Element settings and click Insert once you are done:

Step 3: Add the rest of the text to the Design Element's content

Repeat the Step 1 to add the rest of the text content after the inline Design Element.

This is how it will look like in Wireframe Builder mode:

Save and/or republish your page. 

Related articles:

• Visual Builder and Wireframe Builder: Known Issues and Limitations
• Text Editing Experience in Visual Builder and Wireframe Builder
• Introducing Inline Design Elements Feature for Visual Builder and Wireframe Builder