OOTB Search Icon and Search Field alignment issue

(0) Share

Report

Posted on by domliu37

314 Super User 2024 Season 1

The search icon box is ever so slightly smaller than the search box... can it be re-sized easily?

I noticed the same issue for anopther portal as well..

Categories:

General topics

Search Icon.PNG

I have the same question (0)

All responses (4)

Answers (0)

Inogic 1,135 Super User 2025 Season 2 on at

Like (0)

Report

Hi @domliu ,

You can try out the code given below,
Paste the code in the CSS File for the respective Web Page,
/* !important will Overwrite the default CSS */
.btn.btn-default.btn-hg{
    border: 0px !important;
    border-left: 1px solid #2E456B !important;
}
.query.form-control{ border: 0px !important; }

.input-group.pull-left.view-search.entitylist-search{
    border: 1px solid #2E456B !important;
}

Click on the Edit Code for the Respective Web Page,
Look for the CSS file,

Please refer to the screenshot given below,

Save and SYNC the Website,

Thanks!

Inogic Professional Services Division
Power Platform and Microsoft Dynamics 365 CRM Development – All under one roof!
Drop an email at crm@inogic.com
Services: http://www.inogic.com/services/
Power Platform/Dynamics 365 CRM Tips and Tricks: http://www.inogic.com/blog/

Was this reply helpful? Yes No
domliu37 314 Super User 2024 Season 1 on at

Like (0)

Report

Hi there,

Thanks for the reply I really appreciate it. I tried the css you provide but the hover hover effect isn't that nice, also there's still a small gap at the bottom, sorry, clients are super focused on details! im sure you understand 🤣

Thanks,
Dom

Was this reply helpful? Yes No
Inogic 1,135 Super User 2025 Season 2 on at

Like (0)

Report

Hi @domliu ,
Yes, You can try it out by styling the search button as Margin 0px or Center the Search button,

Please paste the Updated code given below,

.btn.btn-default.btn-hg{
    border: 0px !important;
    border-left: 1px solid #2E456B !important;
    margin: 0px !important;
    /* Or use the Display Flex to center the Button */
    /* display: flex;
    justify-content: center;
    align-items: center; */
}
Thanks!

Inogic Professional Services Division
Power Platform and Microsoft Dynamics 365 CRM Development – All under one roof!
Drop an email at crm@inogic.com
Services: http://www.inogic.com/services/
Power Platform/Dynamics 365 CRM Tips and Tricks: http://www.inogic.com/blog/

Was this reply helpful? Yes No
Inogic 1,135 Super User 2025 Season 2 on at

Like (0)

Report

Hi @domliu ,

If the code we provided addressed your issue, please mark this solution as “Verified” so that it would help others get the solution for the same.

Thanks!

Inogic Professional Services Division
Power Platform and Microsoft Dynamics 365 CRM Development – All under one roof!
Drop an email at crm@inogic.com
Services: http://www.inogic.com/services/
Power Platform/Dynamics 365 CRM Tips and Tricks: http://www.inogic.com/blog/

Was this reply helpful? Yes No