Jump to content

Text boxes with background image ??? help


gpaulino

Recommended Posts

Text boxes with background image 
 
I'm around trying to put an image in a text box by css, but not in that event put the code extevent

 

this is the css that gets me the image in the text box

 

.searchBox{
  background-image:url('images/magnifying-glass.gif');
  background-repeat:no-repeat;
  padding-left:20px;
}

this is the code I put in the event onbeforerender

 

sender.addCls('searchBox');

 

and does not work

 

help?

post-482-0-00925000-1390409800_thumb.png

Link to comment
Share on other sites

Hi Guillermo E. Paulino. 
 
Try the following: 
 
1. 
.searchBox{  
  background:url('images/magnifying-glass.gif') no-repeat !important;  
  padding-left:20px;
}

2. not onbeforerender, you need to add to afterrender

function afterrender(sender, eOpts)
{
  Ext.get(sender.id + '-inputEl').addCls("searchBox");
}

post-906-0-05827200-1390421911_thumb.png

  • Upvote 1
Link to comment
Share on other sites

  • 4 years later...

Is it possible to do this in Delphi code as well?
I want to do it based on the value of a property.

 

 

EDIT

I found you can do it like this:

yourControl.Color := StringToColor(dmCss.RequiredField);

dmCss is just a simple datamodule. 

type
  TdmCss = class(TDataModule)
  private
    { Private declarations }
  public
    const RequiredField = '$00F1DDC1';
  end;

But that does only the background color. Using a CSS class would be much better, as that gives us the possibility to also color border and do more styling on a web based way. We are doing web development, aren't we?

So if anyone knows the answer how to add a CSS class to the input element via Delphi code, please let me know :-)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...