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

parcel sample, missing import css file #2

Open
hoogw opened this issue Dec 27, 2020 · 2 comments
Open

parcel sample, missing import css file #2

hoogw opened this issue Dec 27, 2020 · 2 comments

Comments

@hoogw
Copy link

hoogw commented Dec 27, 2020

Screen Shot 2020-12-27 at 10 15 02 AM

Screen Shot 2020-12-27 at 9 51 55 AM

I have tried parcel.js sample, missing all check box, see red circle above screen shot,

I realize your original sample parcel.js source code, missing

                     import 'ol-layerswitcher/dist/ol-layerswitcher.css';

By add above css, still missing all check box, why?

Is it polluted by with other css? I also have materializedcss, and many other css.

@hoogw
Copy link
Author

hoogw commented Dec 27, 2020

Screen Shot 2020-12-27 at 10 30 40 AM

Radio check box element is there (red line), it does have style, but somehow it was hidden, not showing as expected

by check console, radio style, I realized that radio check box css style was overide by materializecss

So I uncheck, cross line 3 style from materializedcss, (red square, below screen shot), now it shows as expected.

Screen Shot 2020-12-27 at 10 36 19 AM

@hoogw
Copy link
Author

hoogw commented Dec 27, 2020

I have same error fixed by add style tag in html to overwrite opacity to 1

materialize css set radio opacity to 0, we must undo it to 1

how to fix this issue, click here

or issue 2 , click here

your html add following style tag to overwrite it

                        <!--   bug fix,   radio button is hidden at openlayer base map switcher, due to materialize css set radio opacity to 0 , fix by undo opacity to 1 -->

                                  <!--  issue and fix
                                      https://github.com/walkermatt/ol-layerswitcher/issues/388
                                      https://github.com/walkermatt/ol-layerswitcher-examples/issues/2
                                      https://stackoverflow.com/questions/49757521/materialize-css-radio-buttons-not-visible
                                    -->
                                  
                                    
                                  <style>
                                        [type="radio"]:not(:checked), [type="radio"]:checked {
                                            position: relative; 
                                            opacity: 1; 
                                        }
                                            
                                  </style>

                        <!--   bug fix,   radio button is hidden at openlayer base map switcher, due to materialize css set radio opacity to 0 , fix by undo opacity to 1 -->

After fix, it works as expected
Screen Shot 2020-12-27 at 11 17 19 AM

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

1 participant