Forms - css classes and overflowing labels

cancel
Showing results for 
Search instead for 
Did you mean: 
dzider
Active Member

Forms - css classes and overflowing labels

Hi,

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

problem.PNG

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

3 Replies
EddieMay
Alfresco Employee

Re: Forms - css classes and overflowing labels

Hi @dzider,

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

Thanks 

Digital Community Manager, Alfresco Software.
Problem solved? Click Accept as Solution!
dzider
Active Member

Re: Forms - css classes and overflowing labels

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
Alfresco Employee

Re: Forms - css classes and overflowing labels

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