Is it possible add the image in UniEdit

[Timothy lam]

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 !

[Hayri ASLAN]

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

[Timothy lam]

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?

[Sherzod]

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;

 

[Timothy lam]

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?

[Hayri ASLAN]

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.

[Timothy lam]

Noted with thanks!

[Sherzod]

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;

 

[Timothy lam]

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.

[Sherzod]

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.

[Timothy lam]

Noted with thanks!