Opened 8 years ago

Closed 5 years ago

#4559 closed Bug (duplicate)

Menus buttons width

Reported by: jean-mat grimaldi 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 (1)

ticket_buttons_styles.jpg (565.2 KB) - added by jean-mat grimaldi 8 years ago.

Download all attachments as: .zip

Change History (13)

Changed 8 years ago by jean-mat grimaldi

Attachment: ticket_buttons_styles.jpg added

comment:1 Changed 8 years ago by Garry Yao

Resolution: invalid
Status: newclosed

'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 8 years ago by 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

comment:3 Changed 8 years ago by Garry Yao

Keywords: Discussion added
Milestone: CKEditor 3.1CKEditor 3.x
Resolution: invalid
Status: closedreopened
Version: SVN (CKEditor)

Leave the ticket open and call for discussion.

comment:4 Changed 8 years ago by Garry Yao

Component: Core : StylesUI : Toolbar

comment:5 Changed 8 years ago by Garry Yao

Link with #4568.

comment:6 Changed 8 years ago by Matti Järvinen

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

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

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

}

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

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

comment:11 Changed 7 years ago by Frederico Caldeira Knabben

Milestone: CKEditor 3.x

Milestone CKEditor 3.x deleted

comment:12 Changed 5 years ago by Jakub Ś

Resolution: duplicate
Status: reopenedclosed

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 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy