delagoutte Posted April 5, 2017 Share Posted April 5, 2017 I have a tunibutton on a panel. this button is anchor on right and left. When i decrease my panel size my button size width is decrease. If the caption is too long for the button, i would like the caption to be written on 2 lines or that the font size decrease automaticly. Is it possible to do that ? Quote Link to comment Share on other sites More sharing options...
mika Posted April 5, 2017 Share Posted April 5, 2017 I've solved this by modifying css of the button manually in code. However, it would be very nice feature to achieve this by simply setting property like 'AutoWrap' to true. Quote Link to comment Share on other sites More sharing options...
delagoutte Posted April 5, 2017 Author Share Posted April 5, 2017 Could you give me the code that you produce for do it ? Quote Link to comment Share on other sites More sharing options...
mhmda Posted April 5, 2017 Share Posted April 5, 2017 CSS: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 5, 2017 Share Posted April 5, 2017 Hi, I think here you need to consider the length of the caption, the width of the button, and depending on this to change some properties of css: "line-height", "white-space" Quote Link to comment Share on other sites More sharing options...
delagoutte Posted April 5, 2017 Author Share Posted April 5, 2017 Sorry , I'm not used to working with css and js So i try this : Custom Css : .wrap-button .x-button-label { word-wrap: break-word; } and on my button : function beforeInit(sender, config) { config.cls="wrap-button"; } But it don't work. Am i on the good way ? Quote Link to comment Share on other sites More sharing options...
mhmda Posted April 5, 2017 Share Posted April 5, 2017 Test case??? Image?? give us something to help you Quote Link to comment Share on other sites More sharing options...
delagoutte Posted April 5, 2017 Author Share Posted April 5, 2017 Attach to this message a small project test On start if i move the splitter to left i have but i would : button wrap.rar Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 5, 2017 Share Posted April 5, 2017 Hi, One possible solution I think, can you try to use this approach for now ?! UniButton1 -> ClientEvents -> ExtEvents -> function resize: function resize(sender, width, height, oldWidth, oldHeight, eOpts) { var me = sender.btnInnerEl; var tm = new Ext.util.TextMetrics(); var lineHeight = parseInt(me.getStyle("line-height")); if (tm.getSize(sender.text).width >= width + 25) { me.setStyle("line-height", lineHeight / 2 + "px"); me.setStyle("white-space", "normal"); } else { me.setStyle("white-space", "nowrap"); }; } Best regards. 1 Quote Link to comment Share on other sites More sharing options...
delagoutte Posted April 6, 2017 Author Share Posted April 6, 2017 thanks but it not work Quote Link to comment Share on other sites More sharing options...
GerhardV Posted April 7, 2017 Share Posted April 7, 2017 What Delphi Developer advised does work, I have tested it...see attachment. Quote Link to comment Share on other sites More sharing options...
GerhardV Posted April 7, 2017 Share Posted April 7, 2017 Here is a modified version of Delphi Developer's solution which scales the number of lines dynamically...obviously there is only so much space to fit eventually. function resize(sender, width, height, oldWidth, oldHeight, eOpts) { var me = sender.btnInnerEl; var tm = new Ext.util.TextMetrics(); var lineHeight = parseInt(me.getStyle("line-height")); var textWidth = tm.getSize(sender.text).width; if (textWidth >= width + 25) { me.setStyle("line-height", lineHeight / Math.ceil(textWidth/width) + "px"); me.setStyle("white-space", "normal"); } else { me.setStyle("white-space", "nowrap"); }; } 1 Quote Link to comment Share on other sites More sharing options...
delagoutte Posted April 7, 2017 Author Share Posted April 7, 2017 Ok, excuse me delphi developer. it work in the sample. Thanks GerhardV it not work in my main project. In my main project the button is in a uniframe and the frame is assigned to the left panel. I'll investigate and i don't find, i'll come bak with a new sample. Thanks for all Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 7, 2017 Share Posted April 7, 2017 Hi, You can use with Ext.defer for example Best regards. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 7, 2017 Share Posted April 7, 2017 function resize(sender, width, height, oldWidth, oldHeight, eOpts) { var me = sender.btnInnerEl; var tm = new Ext.util.TextMetrics(); var lineHeight = parseInt(me.getStyle("line-height")); if (tm.getSize(sender.text).width >= width + 25) { Ext.defer(function() { me.setStyle("line-height", lineHeight / 2 + "px"); me.setStyle("white-space", "normal"); }, 50); } else { me.setStyle("white-space", "nowrap"); }; } Quote Link to comment Share on other sites More sharing options...
delagoutte Posted April 7, 2017 Author Share Posted April 7, 2017 thanks a lot. it's ok with ext.defer Quote Link to comment Share on other sites More sharing options...
SergioGarcia Posted December 4, 2018 Share Posted December 4, 2018 can you give the complete example? I can not get it to work thk! Quote Link to comment Share on other sites More sharing options...
NelsonFS Posted December 12, 2018 Share Posted December 12, 2018 try just add in ServerModule.CustomCSS: .x-btn-button { white-space: normal; word-wrap: break-word; } 1 Quote Link to comment Share on other sites More sharing options...
NelsonFS Posted December 31, 2018 Share Posted December 31, 2018 other solution.. in ExtEvents: function afterrender(sender, eOpts) { sender.btnInnerEl.setStyle('white-space', 'normal'); } 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.