Menus buttons width

[macadames]

Hi,

I think menu buttons width is bad.

When changing language in 'fr' you can see the bug in attached image.

Thx

Jean-mat

[garry.yao]

'Inline label' is very special as we must impose a fixed size on it, since it's not able to know potentially all the possible text size within it ( text may comes from the combo options ), so it's not a bug.
You could provide your own style if you see problems with your language, e.g. :

.cke_skin_kama .cke_fontSize .cke_text 
{
   width: 35px;
}

[macadames]

So it's perhaps a bad choice to use label tags for menus' headers, your solution cannot be easily implemented in multinlingual sites and make the ckeditor integration complex (css depending on lang, hmm it's strange ...)

Moreover, you are not able to find the good configuration for the ckeditor.com demo pages itself. The capture has be done on these pages ;-).

So i think this ticket must be re-open.

Cheers

[garry.yao]

Leave the ticket open and call for discussion.

[garry.yao]

Link with #4568.

[matti]

What css rules apply and where are the css-files related to this?

[macadames]

Hi,

i think the solution is really simple.

in editor.css just add "display: block;" in this declaration :

.cke_skin_kama .cke_browser_gecko .cke_rcombo .cke_label, .cke_skin_kama .cke_browser_webkit .cke_rcombo .cke_label { float:left; }

remarks :

- the float left has no sense with inline blocks.

- The problem with my solution could be the righttoleft or lefttoright configuration

- the bug must be fixed in all skins

Happy end year feasts to everybody

[macadames]

Hmm my solution doesn't work in all situations.

The real problem cames from these kind of declarations :

.cke_skin_kama .cke_fontSize .cke_text {

width:25px;

}

.cke_skin_kama .cke_rcombo .cke_text {

width:60px;

}

These declarations could be just replaced by a padding on label to get a good design in all languages :

.cke_inline_label {

padding-right:0.5em;

}

[fredck]

You're not really fixing anything with this change. You're simply making the font size combo having the default width, which is 60px. Whatever attempt to remove the fixed size of these combos can make the toolbar elements start dancing depending on the size of the combo texts, which is extremely undesirable.

[macadames]

Hi Fred,

You're right the dancing effect is indesirable. However, waiting for a more generic solution which will resize all buttons or menus in javascript, we can do a temporary small improvement :

the size button is fixed to 25px (really too small i think)

Just remove this declaration in editor.css will give to the fontSize button label the same width as other labels :

.cke_skin_kama .cke_fontSize .cke_text{width:25px;}

Best regards ;-)