Layout issues with Note Control

Daniel Almeida

June 6, 2018 at 3:35 am #5170

Hello,

I’m trying to set a screen divided in two vertical sections.

I have the following layout:

Responsive Sensor

Horizontal Layout (Justified)

Vertical Layout 1 (65% width)

Vertical Layout 2 (35% width)

If I place a Note Control with a large text inside the vertical layout, it will break the screen (it will grow outside the 35% width).

How can I force it to wrap up inside the Vertical layout defined width?

I’ve tried different settings and no luck.

Simple screen example included.

SPARK Support

June 20, 2018 at 10:44 am #5196

Hi Daniel,

It appears that the CSS for the Horizontal Layout is overriding the white-space style for the Note control.

A simple fix would be to add an HTML Attribute to the Note control with the Name: style and Value: white-space: normal.

Alternatively, you could place a Custom HTML control on the page with the CSS to apply to the Note control and add a Class to each Note control such as wrapNote:

<style>
.wrapNote>div>p{
white-space: normal;
}
</style>

Regards,

Stephen P.

Daniel Almeida

June 21, 2018 at 2:11 am #5198

Thank you for your answer,

I also had implemented a solution using CSS but I wanted to make sure I was not using the objects in any wrong way.

SPARK Support

June 21, 2018 at 1:59 pm #5199

Hi Daniel,

As long as your CSS solution is specific to the correct div, you should be fine.  The SPARK UI Toolkit was developed to be very customizable.

Regards,

Stephen P.