[cv-search] magnifying glass is displayed outside the input field

[tbs-heiss]

Summary

Hello everyone, I have a problem with the cv-search. It's not possible for me to imagine the component in such a way that the magnifying glass is displayed inside the field.

Relevant information

For me it looks like this:

In the library, however, it looks like this:

My code looks like this:

<cv-form class="form" @submit.prevent="actionSubmit"> <cv-search class="search" label= "Search label" placeholder="Search Placeholder" clearArialabel= "Custom search aria label" > </cv-search> <cv-button class="button">Suchen</cv-button> </cv-form>

I have tried it in different variations, as well as outside the form. The problem remains. I am happy to receive tips and suggestions for solutions.

[trickstival]

I tried it out in this sandbox with your code and it looks fine.

It's hard to say what's going on without more info, but you might be overriding the library's css.

[KUGDev]

The main issue here is that new versions of carbon-components have class 'bx--search-magnifier-icon' instead of 'bx--search-magnifier'. And when you try to use carbon-components-vue with them, this happens Proposed solutions for now:

1. You can downgrade your 'carbon-components' package to 10.30.0 and get rid of that issue for now
2. You can change the class name manually in provided path: node_modules/@carbon/vue/src/components/cv-search/cv-search.vue

[github-actions[bot]]

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.