Forms - css classes and overflowing labels

[dzider]

Hi,

I have some problems with displaying forms in ADF, especially styling them and containing overflowing labels, e.g:

I thought about overwriting css but for some reason overwriting classes (in this case adf-label) doesn't work. I can change only elements with id.

How do I overwrite css classes? Alternatively, is there any other way of fixing the styling of the forms?

Thanks for any help

[EddieMay]

Hi @dzider,

Could you outline what you did that didn't work re: overriding css classes?

Thanks 

[dzider]

Hi @EddieMay,

It turned out I had to add my css in the main css file, i.e. styles.scss. "white-space: normal;" fixes the overflowing problem.

However, I noticed that I still can't overwrite css per se, i.e. I can add new css properties but can't overwrite the ones that are already specified. Any idea if it's possible? Also, can it be done on the component level, instead of adding css in the main styles.scss file?

Thanks for your help!

[eugenio_romano]

Hi ,

Maybe those links can help you:

https://github.com/Alfresco/alfresco-ng2-components/blob/develop/docs/user-guide/theming.md

https://material.angular.io/guide/customizing-component-styles

https://github.com/Alfresco/alfresco-ng2-components/blob/develop/docs/tutorials/basic-theming.md

In general, anyway, the style should be possible to overwrite from your component as well. We use encapsulation none in our components:

https://angular.io/api/core/ViewEncapsulation

Maybe your css os scss was included in the build or it didn't get it for some priority and you need !important