Opened 5 years ago

Last modified 4 years ago

#12479 assigned Bug

selection bug with widgets

Reported by: Dexter Media Owned by: Szymon Kupś
Priority: Normal Milestone:
Component: UI : Widgets Version: 4.3
Keywords: Cc: thorben.schiller@…

Description

Hi,

I'm struggling with a strange bug with the image2 (http://ckeditor.com/addon/image2, version 4.4.4) plugin. If I insert two widgets with a caption and align the first one left and leave the align of the last one none, the first widgets becomes unselectable.

The problem was reproducible on the demo side http://ckeditor.com/demo#widgets

This code should reproduce the problem:

<figure class="image" style="float:left"><img alt="Apollo-CSM-LM" src="http://c.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>Apollo CMS-LM spacecraft</figcaption>
</figure>

<figure class="image"><img alt="Apollo-CSM-LM" src="http://c.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>Apollo CMS-LM spacecraft</figcaption>
</figure>

If you inspect the selection wrapper of the widget with none align, it covers the first widget (http://imgur.com/veQbbwE). Could be a problem with the css float?

I tested it in Chrome (latest) and Firefox (latest) on a Mac (Version 10.8.5)

Thank you for your help!

Change History (4)

comment:1 Changed 5 years ago by Jakub Ś

Status: newconfirmed
Version: 4.4.44.3

After some discussion we have decided to confirm this ticket.

To work around this you can insert something like below between two widgets or make two widgets float:left and insert below div behind them.

<div style="clear:left;height:0;font-size:0px;"></div>

comment:2 Changed 5 years ago by Piotrek Koszuliński

This is a valid issue. When the first widget is floated, the second overlaps it. That's unfortunately how CSS works. Perhaps we can improve styling of the widget wrappers, but we didn't find yet a good option.

First thing that could work is overflow:hidden, but then the drag handle is cut in half. Second option could be to add clear:both, but that would prevent floating one image next to another. So unfortunately it looks that there's no option in CSS right now and we have to wait for some new features.

If anyone have any idea, we would gladly check it. Maybe some display:table?

comment:3 Changed 5 years ago by Piotrek Koszuliński

I see that display: inline-box, inline-table, inline-flex, flex and table work great on Blink. We could check which of these is widely supported.

comment:6 Changed 4 years ago by Szymon Kupś

Owner: set to Szymon Kupś
Status: confirmedassigned
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy