Timothy lam Posted May 2, 2021 Share Posted May 2, 2021 Hi, I want to add image in UniEdit. Is it possible? If yes, how to add in front of UniEdit or the end of UniEdit? Thanks ! Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted May 2, 2021 Share Posted May 2, 2021 2 hours ago, Timothy lam said: Hi, I want to add image in UniEdit. Is it possible? If yes, how to add in front of UniEdit or the end of UniEdit? Thanks ! Hello For the right side you can use Triggers. For the left side you can use something below UniServerModule -> CustomCSS .icon-textfield:before { position: absolute; height: 100%; z-index: 9999; left: 5px; font-size: 12px; top: 25%; } .icon-textfield .x-form-text { padding-left: 20px; } YourForm.OnReady Event procedure TMainForm.UniFormReady(Sender: TObject); begin with UniEdit1, JSInterface do begin JSCall('inputWrap.addCls', ['fa fa-user icon-textfield']); end; end; Result Quote Link to comment Share on other sites More sharing options...
Timothy lam Posted May 2, 2021 Author Share Posted May 2, 2021 34 minutes ago, Hayri ASLAN said: Hello For the right side you can use Triggers. For the left side you can use something below UniServerModule -> CustomCSS .icon-textfield:before { position: absolute; height: 100%; z-index: 9999; left: 5px; font-size: 12px; top: 25%; } .icon-textfield .x-form-text { padding-left: 20px; } YourForm.OnReady Event procedure TMainForm.UniFormReady(Sender: TObject); begin with UniEdit1, JSInterface do begin JSCall('inputWrap.addCls', ['fa fa-user icon-textfield']); end; end; Result It works. Thanks. But it override the original width of UniEdit. Am I need to resign the width individually? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 2, 2021 Share Posted May 2, 2021 5 hours ago, Timothy lam said: It works. Thanks. But it override the original width of UniEdit. Am I need to resign the width individually? One possible workaround: procedure TMainForm.UniFormReady(Sender: TObject); begin with UniEdit1, JSInterface do begin JSCall('inputWrap.addCls', ['fa fa-user icon-textfield']); JSCall('inputEl.setWidth', [Width-2]); end; end; 1 Quote Link to comment Share on other sites More sharing options...
Timothy lam Posted May 3, 2021 Author Share Posted May 3, 2021 Hi, It works. Thanks. But am I need to set all components in UniFormReady? If my form has over 50 components, I need to put this kinds of statements in UniFormReady. Am I right? Quote Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted May 3, 2021 Share Posted May 3, 2021 39 minutes ago, Timothy lam said: Hi, It works. Thanks. But am I need to set all components in UniFormReady? If my form has over 50 components, I need to put this kinds of statements in UniFormReady. Am I right? It is based on the code. Above code has "inputWrap.addCls" so we need to make sure inputWrap is created. Because of that we used OnReady event. Quote Link to comment Share on other sites More sharing options...
Timothy lam Posted May 3, 2021 Author Share Posted May 3, 2021 Noted with thanks! Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 3, 2021 Share Posted May 3, 2021 4 hours ago, Timothy lam said: But am I need to set all components in UniFormReady? If my form has over 50 components, I need to put this kinds of statements in UniFormReady. Am I right? Hello, Also try this approach for all UniEdits. UniMainModule 1. Uses ..., UniEdit; 2. OnNewComponent event procedure TUniMainModule.UniGUIMainModuleNewComponent(AComponent: TComponent); begin if (AComponent is TUniEdit) then with (AComponent as TUniEdit) do JSInterface.JSAddListener('afterrender', 'function(){this.inputWrap.addCls("fa fa-user icon-textfield"); this.inputEl.setWidth('+ Width.ToString +'-2)}') end; Quote Link to comment Share on other sites More sharing options...
Timothy lam Posted May 3, 2021 Author Share Posted May 3, 2021 Hi Sherzod, Thanks. I tried to using your suggestion. But it will apply to all UniEdit component with same icon. My expect result is different icon for each UniEdit that base on different situation. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 3, 2021 Share Posted May 3, 2021 35 minutes ago, Timothy lam said: I tried to using your suggestion. But it will apply to all UniEdit component with same icon. Yes. 36 minutes ago, Timothy lam said: My expect result is different icon for each UniEdit that base on different situation. You can do this by specifying a property (icon) when creating, or use the method Hayri said. Quote Link to comment Share on other sites More sharing options...
Timothy lam Posted May 3, 2021 Author Share Posted May 3, 2021 Noted with thanks! 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.