Ticket #4559 (closed Bug: duplicate)

Opened 5 years ago

Last modified 19 months ago

Menus buttons width

Reported by: macadames Owned by:
Priority: Normal Milestone:
Component: UI : Toolbar Version: SVN (CKEditor) - OLD
Keywords: Discussion Cc:

Description

Hi,

I think menu buttons width is bad.

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

Thx

Jean-mat

Attachments

ticket_buttons_styles.jpg (565.2 KB) - added by macadames 5 years ago.

Change History

Changed 5 years ago by macadames

comment:1 Changed 5 years ago by garry.yao

  • Status changed from new to closed
  • Resolution set to invalid

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

comment:2 Changed 5 years ago by 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

comment:3 Changed 5 years ago by garry.yao

  • Status changed from closed to reopened
  • Keywords Discussion added
  • Version set to SVN (CKEditor)
  • Resolution invalid deleted
  • Milestone changed from CKEditor 3.1 to CKEditor 3.x

Leave the ticket open and call for discussion.

comment:4 Changed 5 years ago by garry.yao

  • Component changed from Core : Styles to UI : Toolbar

comment:5 Changed 5 years ago by garry.yao

Link with #4568.

comment:6 Changed 4 years ago by matti

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

comment:7 Changed 4 years ago by 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

comment:8 Changed 4 years ago by 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;

}

comment:9 Changed 4 years ago by 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.

comment:10 Changed 4 years ago by 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 ;-)

comment:11 Changed 4 years ago by fredck

  • Milestone CKEditor 3.x deleted

Milestone CKEditor 3.x deleted

comment:12 Changed 19 months ago by j.swiderski

  • Status changed from reopened to closed
  • Resolution set to duplicate

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.

Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy