nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

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

Find more posts tagged with

Application Development Framework

Comments

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