Menus buttons width

[jean-mat grimaldi]

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;
}

[jean-mat grimaldi]

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 Järvinen]

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

[jean-mat grimaldi]

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

[jean-mat grimaldi]

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;

}

[Frederico Caldeira Knabben]

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.

[jean-mat grimaldi]

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 ;-)

[Frederico Caldeira Knabben]

Milestone CKEditor 3.x deleted

[Jakub Ś]

I believe this is the same issue as this one #6162

As explained by @fredck such cases should be handled by CSS and not by JavaScript. All that is needed here is proper document explaining how to change these settings. I’m closing this one as DUP #6162.