Elastic UI CSS missalignement

[AimSteyz]

Hi again,

So this is the follow of the #5 issue, the CSS cant align correctly, i've try modifying the CSS file "@elastic/eui/dist/eui_theme_light.css" but it does'nt seems to work

Here is what I have

And the same component in React

[devilwjp]

@AimSteyz I compared your two pictures, and I found that the font style and border style are different, which means that a basic style is missing.

Is the React component displayed in another React project, or in a Vue project?

Because different projects have their own different basic styles.

And I also found that in the example of elastic_ui's combo-box, there is a public style with a button selector , and this button selector is not included in @elastic/eui/dist/eui_theme_light.css.

In this page (https://elastic.github.io/eui/#/forms/combo-box), when I cancel the padding property in this public button selector in the debug style panel, it is not centered.

[AimSteyz]

The style are differents but it is the same CSS file imported for each The screen is from the same component but in react so it the "same" things

But modifying the css in the vue project didnt impact the display even if it work when unclicking the box on your picture

[devilwjp]

@AimSteyz I mean, the reason why this icon cannot be centered is not the width attribute, but the default padding of the browser's button tag is 6px, you only need to set the padding and margin of the browser's default button to 0px, and it will be centered , such as the following example.

button {
    background: none;
    border: none;
    padding: 0px;
    margin: 0px;
    color: inherit;
    border-radius: 0px;
    font-size: inherit;
}

[AimSteyz]

Oh ok i understand sorry, but this is not a button that i create, this is a component from a lib, so this is not a button that i have create here is all my file to get this code :

[devilwjp]

I think it may be that vue3's vite template project lacks style rewriting for button tags. You can try adding a style tag to this vue file and add the button style I provided above.

[AimSteyz]

Ok thank you

[devilwjp]

@AimSteyz

Aha! I found the cause of the problem, you should use EuiProvider in the outermost layer.

<script setup>
import '@elastic/eui/dist/eui_theme_light.css';
import { ref } from 'vue';
import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';
import { icon as arrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down';
import { icon as returnKey } from '@elastic/eui/es/components/icon/assets/return_key';
import { EuiComboBox, EuiProvider } from '@elastic/eui';
import { applyReactInVue } from 'veaury'

const EuiProviderVue = applyReactInVue(EuiProvider)
const optionsStatic = ref([]);

appendIconComponentCache({
  arrowDown,
  returnKey
});
const EuiComboBoxVue = applyReactInVue(EuiComboBox)
</script>

<template>
  <EuiProviderVue colorMode="light">
    <EuiComboBoxVue
        aria-label="Accessible screen reader label"
        placeholder="Select or create options"
        :options="optionsStatic"
        :isClearable="true"
        data-test-subj="demoComboBox"
        :autoFocus="true"
    />
  </EuiProviderVue>
</template>

[AimSteyz]

<script setup>
import '@elastic/eui/dist/eui_theme_light.css';
import { ref } from 'vue';
import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';
import { icon as arrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down';
import { icon as returnKey } from '@elastic/eui/es/components/icon/assets/return_key';
import { EuiComboBox, EuiProvider } from '@elastic/eui';
import { applyReactInVue } from 'veaury'

const EuiProviderVue = applyReactInVue(EuiProvider)
const optionsStatic = ref([]);

appendIconComponentCache({
  arrowDown,
  returnKey
});
const EuiComboBoxVue = applyReactInVue(EuiComboBox)
</script>

<template>
  <EuiProviderVue colorMode="light">
    <EuiComboBoxVue
        aria-label="Accessible screen reader label"
        placeholder="Select or create options"
        :options="optionsStatic"
        :isClearable="true"
        data-test-subj="demoComboBox"
        :autoFocus="true"
    />
  </EuiProviderVue>
</template>

Waho, thank you ! I close the issue, Thank you very much !