How to use fontawesome in UniDBLookup triggers?

[Hassan]

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

[mhmda]

Do you need the icon per item or only one icon for the component?

[Sherzod]

Hi,

 

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

[shawdown]

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.

[Hassan]

Do you need the icon per item or only one icon for the component?

Preferably, one icon per trigger item.

[Hassan]

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";}

[Sherzod]

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";
}

[Hassan]

 

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.