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

I have the same question (0)

All responses (4)

Answers (0)

Sort by

Inogic 1,283 Moderator on at

Like (0)

Report
Copy link

Link copied!

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
Copy link

Link copied!

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,283 Moderator on at

Like (0)

Report
Copy link

Link copied!

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,283 Moderator on at

Like (0)

Report
Copy link

Link copied!

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