New UI - HTML Component Wrapping Issue

Posted by Meryk on 21-Sep-2015 06:13

Hello,

I have an HTML component on a view page, in a section of 4 columns. The HTML component is in the first Column. I purposely wrote a very long text in that component, without spaces, and the way it appears in that View page is not correct.

Basically the text is not wrapped, and its just lays out of its columns onto the other columns, which does not look good as you can see in the below screenshot :

I insist on the fact that the HTML component you see is only in the first column of that section.

Are you guys aware of that ?

Thank you

Meryem

Rollbase - Forum
Posted by Thierry Ciot on 21-Sep-2015 15:05

Typically this wouldn’t happen as there spaces between words.  In this specific case, you are against the overflow rules in an html element.
Depending on what you want to achieve, you can either add the style overflow-x: scroll; or the style overflow-x: hidden; or    word-break: break-all; word-wrap: break-word;
 
For 4.0.2, we are fixing it by adding a css class to html component like this:
/* Styles for cell type: html component */
.rbs-htmlComponent {
    word-break: break-all;
    word-wrap: break-word;
}
 
So it can it overridden and/or additional styles can be added by simply overriding in custom header on a per app basis and you won’t have to change/edit each html component.
 
Thierry.
 

All Replies

Posted by Thierry Ciot on 21-Sep-2015 15:05

Typically this wouldn’t happen as there spaces between words.  In this specific case, you are against the overflow rules in an html element.
Depending on what you want to achieve, you can either add the style overflow-x: scroll; or the style overflow-x: hidden; or    word-break: break-all; word-wrap: break-word;
 
For 4.0.2, we are fixing it by adding a css class to html component like this:
/* Styles for cell type: html component */
.rbs-htmlComponent {
    word-break: break-all;
    word-wrap: break-word;
}
 
So it can it overridden and/or additional styles can be added by simply overriding in custom header on a per app basis and you won’t have to change/edit each html component.
 
Thierry.
 

Posted by Meryk on 22-Sep-2015 03:24

Yes I did added the "word-break: break-all;     word-wrap: break-word;"  to the style of the component. But still wanted to know if this is going to be fixed.

Well good to hear it will !

Thank you

Meryem

Posted by Thierry Ciot on 22-Sep-2015 10:02

Great. thanks.

This thread is closed