Close button invisible about react-image-lightbox HOT 9 CLOSED

@dongapplyboard I'm afraid that's a limitation of the way I've put things together. However, it looks like react-emotion has a function called injectGlobal for inserting styles in times like these, without having to use a separate stylesheet.

from react-image-lightbox.

If you're using bootstrap, it's quite possible that the .close class is getting overwritten. Looking back now, I'm not sure why I used such a generic name for that button. As a rough fix until I remove the deprecated .close in v4.0, you can take the style for the close button and give it !important. Like so (untested):

.ril-close {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…UgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat 50% !important;
}

Please let me know if that does it for you.

from react-image-lightbox.

Hi @fritz-c, thanks for your response. I was not able to get it to work.

1. I guess you're right on the collision with Bootstrap.
2. Is it possible you've pasted a shortened (invalid) url? The browser console / github may clip it (I notice a '...' in the string, doesn't seem base64 to me).

I get this error:

[Error] Failed to load resource: Data URL decoding failed (data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…UgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=)

from react-image-lightbox.

Ah, sorry about that. I copied that data url from the Chrome console. Try this one:

.ril-close {
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=') no-repeat center !important;
}

from react-image-lightbox.

@fritz-c That worked, thanks! :)

from react-image-lightbox.

To be properly shown it also needs a float: none !important;

from react-image-lightbox.

Hey I'm having trouble accessing the .close class. I rather not use stylesheets and have opted to utilize react-emotion. The project doesn't seem to able to able to recognize that I am trying to add a className to the Lightbox component with wrapperClassName as well as className.

from react-image-lightbox.

@fritz-c Thanks so much. Is there also a way for me to move the close button all the way to the left bar away from the zoom in and zoom out buttons?

from react-image-lightbox.

@dongapplyboard
You might be able to absolutely position it.

from react-image-lightbox.