search

LHNCBC / lforms

See the project website at http://lhncbc.github.io/lforms/, or view the demo website at https://lhcforms.nlm.nih.gov/lhcforms.
Other
99 stars 55 forks source link

CSS is overwriting other CSS in my application #138

Open joshduchamp opened 7 months ago

joshduchamp commented 7 months ago

I installed lforms by downloading version 34.2 from https://clinicaltables.nlm.nih.gov/lforms-versions. The styles.css file has a lot of attributes that affect styling across my entire web application, outside of just the lform library. When looking in the css, I see a lot of styles directly applied to html elements without specifying classes. Below is a small snippet showing some examples, but it's fairly extensive when looking through the css.

dl,h1,h2,h3,h4,h5,h6,ol,p,pre,ul{margin-top:0}address,dl,ol,p,pre,ul{margin-bottom:1em}button,hr,input{overflow:visible}pre,textarea{overflow:auto}dd,h1,h2,h3,h4,h5,h6,legend{margin-bottom:.5em}

plynchnlm commented 7 months ago

I suspect those settings are coming from lforms' use of antd components. I am not sure there is a good solution for that. We might turn on the encapsulation option, but what that would do to antd I don't know offhand. Also, some users like to customize the CSS of lforms, and if we encapsulate it, I am not sure that would still be possible. However, I do understand it could be an annoyance to have to reset a bunch of styles that antd is setting. We will look into it.

joshduchamp commented 7 months ago

Thanks @plynchnlm. I'll move forward with customizing the CSS.