Hassan Posted June 22, 2018 Share Posted June 22, 2018 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 Quote Link to comment Share on other sites More sharing options...
mhmda Posted June 23, 2018 Share Posted June 23, 2018 Do you need the icon per item or only one icon for the component? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 23, 2018 Share Posted June 23, 2018 Hi, x-form-mylookup-trigger - mylookup what is it? Quote Link to comment Share on other sites More sharing options...
shawdown Posted June 23, 2018 Share Posted June 23, 2018 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. Quote Link to comment Share on other sites More sharing options...
Hassan Posted June 25, 2018 Author Share Posted June 25, 2018 Do you need the icon per item or only one icon for the component? Preferably, one icon per trigger item. Quote Link to comment Share on other sites More sharing options...
Hassan Posted June 25, 2018 Author Share Posted June 25, 2018 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";} 1 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 26, 2018 Share Posted June 26, 2018 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"; } Quote Link to comment Share on other sites More sharing options...
Hassan Posted June 26, 2018 Author Share Posted June 26, 2018 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. 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.