PDA

View Full Version : Button text truncated



jenner
24 Jul 2015, 4:03 AM
Hi there,

I noticed that the button text ist truncated when a glyph or an icon is used and no extra width config is provided, e.g.:
5.1.0 looks fine: http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/#basic-buttons
6.0.0 truncates the text: http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/?profile=crisp#basic-buttons

Seems to be present in all themes too...

[Edit] I just noticed that it looks fine in FF and IE, the problem is reproducible only in Chrome 41.0.2272.118 (64-bit) Linux or 39.0.2171.99 m Windows

[Edit 2] Disregard all that, everything is as expected after I upgraded Chrome to 44.x

joel.watson
24 Jul 2015, 4:53 AM
Thanks for the follow up on the Chrome version!

Joel

Lukappa
2 Oct 2015, 9:50 PM
A workaround could be to override the default css (this works for small and medium sizes):

.x-btn-icon-right > .x-btn-inner-default-small, .x-btn-icon-left > .x-btn-inner-default-small,
.x-btn-icon-right > .x-btn-inner-default-toolbar-small, .x-btn-icon-left > .x-btn-inner-default-toolbar-small {
max-width: calc(100% - 14px);
}


.x-btn-icon-right > .x-btn-inner-default-medium, .x-btn-icon-left > .x-btn-inner-default-medium,
.x-btn-icon-right > .x-btn-inner-default-toolbar-medium, .x-btn-icon-left > .x-btn-inner-default-toolbar-medium {
max-width: calc(100% - 22px);
}