-
-
Notifications
You must be signed in to change notification settings - Fork 330
Description
Describe the bug
If you have an image that is very wide and not very high, when you display the image gallery the image name can almost completely cover the image itself. This makes it almost impossible to trigger the a href link.
To Reproduce
Steps to reproduce the behavior:
-
Set up a sun editor edit window that includes an image gallery
-
I am using an image that is 320x50 and I believe I am using the stock SE css
-
The relevant parts of initialization are:
editor = SUNEDITOR.create((document.getElementById(theelementid) ), {
"imageGalleryUrl": "/image_mgmt/web_gallery",
buttonList: [
['imageGallery'], // You must add the "imageGalleryUrl".
],
}); -
The content of the url is:
{"result":[
{"src":"https://exceedauction.net/images/a2751/yourlogo.png","thumbnail":"https://exceedauction.net/images/a2751/mobile/yourlogo.png","name":"yourlogo.png"},
{"src":"https://exceedauction.net/images/a2751/ealogo.png","thumbnail":"https://exceedauction.net/images/a2751/mobile/ealogo.png","name":"ealogo.png"}
]} -
ealogo.png is the image that has the issue. It has proportions of 320x50
-
move the mouse over the image and the active image border appears as expected
-
click on the image and nothing happens. There are no errors. I looked into it enough to finally realize that the image name element was covering up almost the entire image leaving only a couple of pixels vertically at the top that would work to trigger the action. Functionally, everything was working but the UI was making it almost impossible to trigger the action.
-
I edited the suneditor.min.css (starting at line 1726 in the firefox webdeveloper tools) and added the "min-height: 70px;" line which resolves my issue at least at the browser width I was using, but I don't know if there are any negative implications on other stuff that might use this css definition.
.sun-editor .se-file-browser .se-file-browser-list.se-image-list .se-file-item-img {
position:relative;
display:block;
cursor:pointer;
width:100%;
height:auto;
min-height: 70px;
border-radius:4px;
outline:0;
margin:10px 0
}
Screenshots
Sample with the issue:

Sample after modifying css which resolved the issue for me (and I will check out the other @media sections to do cover my bases.

Desktop (please complete the following information):
- OS: Windows
- Browser: firefox
- Version [e.g. 22] 141.0
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
Add any other context about the problem here.
This is mostly informational to you. I've used the same feature for lots of images with zero issues and I have a workaround, but as a fellow developer I figured you would want the feedback.
Thank you for all your wonderful work on this product. If you are interested at some point, I'd be happy to show you what we are doing with it. PS. I very much appreciate all of the documentation you provide.