topic Re: Forms - css classes and overflowing labels in Alfresco Forum

Forms - css classes and overflowing labels

dzider — Thu, 23 Jul 2020 09:17:52 GMT

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

Re: Forms - css classes and overflowing labels

EddieMay — Fri, 24 Jul 2020 14:51:21 GMT

Hi @dzider,

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

Thanks

Re: Forms - css classes and overflowing labels

dzider — Wed, 05 Aug 2020 08:41:35 GMT

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!

Re: Forms - css classes and overflowing labels

eugenio_romano — Mon, 10 Aug 2020 10:04:00 GMT

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