Jump to content

How to use fontawesome in UniDBLookup triggers?


Recommended Posts

Hi,

 

I need one of icons in fontawsome to be displayed in UniDBLookup trigger.

I tried following two approaches and for both approaches icon looks Ok on TRITON theme.

The issue is with other themes and icon is not displaying correctly on them (Ex. Nepton, Gray).

 

Try1:

Setting Lookup.Triggers->IconCls := 'x-fa fa-bars';

 

Try2: using custom css

.x-form-mylookup-trigger{position:relative;}
.x-form-mylookup-trigger:before{font-family: FontAwesome; content: "\f0C9";}

 

See attached image for output.

 

So, what is the proper way to use fontawsome in UniDBLookup triggers?

 

Thanks

post-4608-0-34053800-1529690345_thumb.png

Link to post
Share on other sites

Hi,

 

I need one of icons in fontawsome to be displayed in UniDBLookup trigger.

I tried following two approaches and for both approaches icon looks Ok on TRITON theme.

The issue is with other themes and icon is not displaying correctly on them (Ex. Nepton, Gray).

 

Try1:

Setting Lookup.Triggers->IconCls := 'x-fa fa-bars';

 

Try2: using custom css

.x-form-mylookup-trigger{position:relative;}
.x-form-mylookup-trigger:before{font-family: FontAwesome; content: "\f0C9";}

 

See attached image for output.

 

So, what is the proper way to use fontawsome in UniDBLookup triggers?

 

Thanks

 

This would be interesting.

Link to post
Share on other sites

Hi,

 

x-form-mylookup-trigger - mylookup what is it?

 
The below custom css is added to project and trigger item is set as follow: Triggers.Items[1].IconCls := 'x-form-mylookup-trigger';
.x-form-mylookup-trigger{position:relative;}
.x-form-mylookup-trigger:before{font-family: FontAwesome; content: "\f0C9";}
  • Upvote 1
Link to post
Share on other sites

Hi,

 

The below custom css is added to project and trigger item is set as follow: Triggers.Items[1].IconCls := 'x-form-mylookup-trigger';

.x-form-mylookup-trigger{position:relative;}
.x-form-mylookup-trigger:before{font-family: FontAwesome; content: "\f0C9";}

 

Can you try this ?!:

.x-form-mylookup-trigger{
  position:relative;
  display:table-cell;
  background-image:none !important;
  //padding-top:0px;
  line-height: 1.5;
  border-width: 0;
}
.x-form-mylookup-trigger:before{
  font-family: FontAwesome; content: "\f0C9";
}
Link to post
Share on other sites

 

Hi,

 

 

Can you try this ?!:

.x-form-mylookup-trigger{
  position:relative;
  display:table-cell;
  background-image:none !important;
  //padding-top:0px;
  line-height: 1.5;
  border-width: 0;
}
.x-form-mylookup-trigger:before{
  font-family: FontAwesome; content: "\f0C9";
}

 

Thank you. This is better. It worked OK on Big themes. In Classic or Gray the trigger button shows up now (which is good) but has no border and it looks like it is not part of input.

I did below changes and added a single dot image as background. Looks good to me on all themes now.

.x-form-mylookup-trigger{
  position:relative;
  background-image:url("../images/form/trigger-dot-bg.png") !important;
  background-repeat: repeat;
  display:table-cell;
  padding-top: 1px;
  line-height: 1.5;
  border: 1px double gray!important;
}
.x-form-mylookup-trigger:before{
  font-family: FontAwesome; content: "\f0C9";
}

Thanks again.

Link to post
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...