Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style of the slickgrid interfere the global UL/LI bullet style. #868

Closed
5 tasks done
boogiebug opened this issue Jan 18, 2023 · 2 comments
Closed
5 tasks done

Style of the slickgrid interfere the global UL/LI bullet style. #868

boogiebug opened this issue Jan 18, 2023 · 2 comments

Comments

@boogiebug
Copy link
Contributor

boogiebug commented Jan 18, 2023

Describe the bug

I'm using Angular with slickgrid-universal and found that according to the following line. It cause all bullet in front of the UL/LI tag in the whole app disappear.

ul {
  list-style-type: none;
}

https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slick-bootstrap.scss#:~:text=ul%20%7B,%7D

The most painful point is it is not easily overridable, since the selector is at the most global level. My current only work-around is to put more specific selector to other UL/LI, which is is need to do with all other components.

My suggestion is adding more selector or move it into class .slickgrid-container, to make it specific to the slickgrid only.

Reproduction

Simply adding the slickgrid universal stylesheet into your project, and this will happend.

Which Framework are you using?

Angular

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| (framework used)    | VERSION |
| Slickgrid-Universal | VERSION |
| TypeScript          | VERSION |
| Browser(s)          | VERSION |
| System OS           | VERSION |

Validations

@ghiscoding
Copy link
Owner

oh I see, it seems that my change in this PR was a little too aggressive on the slick.bootstrap.scss file. It could be fixed but only for latest Slickgrid-Universal 2.x and Angular-Slickgrid 5.x, I'm not sure which versions you are since you didn't provide that info above. Feel free to submit a PR if you have time, simply removing this code

ul {
list-style-type: none;
}

should be enough to fix the issue, from that PR #488, it looks like I already have necessary bullet removal on other part of the grid (mainly pagination) that were a problem in the past.

ghiscoding added a commit that referenced this issue Jan 19, 2023
- we shouldn't change any styling that are not explicitely under CSS classes related to Slickgrid since these overrides user's styling which is unexpected and it is also hard for the user to override
@ghiscoding
Copy link
Owner

The fix was released in Angular-Slickgrid v5.3.0 and Slickgrid-Universal v2.3.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants