Ckeditor5: Drop-down looks misaligned

Created on 5 Feb 2018  路  3Comments  路  Source: ckeditor/ckeditor5

When there is a separator after (and before) the dropdown it looks like a border around the paragraph menu:

screen shot 2018-02-05 at 11 36 49

Then, when I click on the drop-down, I expect that the panel will be aligned to that menu. The panel looks misaligned:

screen shot 2018-02-05 at 11 36 31

There is no such effect when I disable separator after the headings menu because then there is no "border effect":

screen shot 2018-02-05 at 12 07 26

But then the arrow is more connected to the "B" icon than "paragraph".
screen shot 2018-02-05 at 12 07 34

My proposals are:

  1. align it to the padding, and always add the separator after and before drop-down menus to have the border effect:
    screen shot 2018-02-05 at 12 15 39

  2. Put the arrow on the left and don't use a separator to avoid "border effect":
    screen shot 2018-02-05 at 12 22 19

  3. Create the border the way we had it before, do the drop-down is align to it:
    screen shot 2018-02-05 at 12 06 46

  4. Disconnect separator form the top and bottom, so there is no border around the menu (see https://github.com/ckeditor/ckeditor5/issues/817):
    screen shot 2018-02-05 at 12 26 57

I'm for option 1 or 4.

theme-lark discussion

Most helpful comment

I have a feeling that dropdown options are floating above the dropdown button. It always looked so weird to me (didn't native Safari dropdowns looked a bit like this?). Anyway, it would be more natural if both dropdown options and button were on the same level: either add shadow to the button or "flatten" options (I am for this one).

BTW. It seems that the dropdown options box is too high (it seems like it overlays on a button a bit).

All 3 comments

I didn't have this feeling about the dropdown. The separator's placement is indeed a bit funky, but I'm cool with that. I didn't notice it, even.

What I didn't like so far, though, is the style of the active button when the dropdown is opened. It's in different style than the dropdown's panel (dark bg vs light panel). The old styling (light button and light button) worked better, but back then the dropdown's button always had a border so it was a bit different situation.

I have a feeling that dropdown options are floating above the dropdown button. It always looked so weird to me (didn't native Safari dropdowns looked a bit like this?). Anyway, it would be more natural if both dropdown options and button were on the same level: either add shadow to the button or "flatten" options (I am for this one).

BTW. It seems that the dropdown options box is too high (it seems like it overlays on a button a bit).

I agree that dropdown panel looks higher than dropdown button.

Current dropdown (border-radius and position bottom: 1px)

dropdownold

Proposal

If we will try to change position of dropdown panel to bottom: 0px, and disable border-bottom-left-radius of button and border-top-left-radius of panel it looks flat and like real "panel" instead of "popup". Additionally, we can change a little bit visibility of shadow.

dropdownnew

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Reinmar picture Reinmar  路  3Comments

metalelf0 picture metalelf0  路  3Comments

hybridpicker picture hybridpicker  路  3Comments

oleq picture oleq  路  3Comments

hamenon picture hamenon  路  3Comments