reactjs - just part of image is displaying in antd select component - Stack Overflow

admin管理员组

文章数量:1129441

I want to display some images as an option in select. how can I adjust the height of select object?

here is my code :

import { Form, Image, Layout, Select } from "antd";
import { React } from "react";

const { Content } = Layout;

function Ornek() {
    return (
        <Layout style={{ margin: 0, padding: 0 }}>
            <Content style={{ padding: "0px" }}>
                <Form autoComplete="off" labelCol={{ span: 7 }} wrapperCol={{ span: 16 }}>
                    <Form.Item name="ghsEtiket" label="GHS">
                        <Select multiple mode="tags">
                            <Select.Option value="1">
                                <Image src=".png" style={{ width: 50 }} />
                            </Select.Option>
                            <Select.Option value="2">
                                <img src=".png" style={{ width: 50 }} />
                            </Select.Option>
                            <Select.Option value="3">
                                <img src=".png" style={{ width: 50 }} />
                            </Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Content>
        </Layout>
    );
}

export default Ornek;

and the result is :

how can I display the whole image in the GHS section. I tried to change the height of select component but it doesn't worked.

I want to display some images as an option in select. how can I adjust the height of select object?

here is my code :

import { Form, Image, Layout, Select } from "antd";
import { React } from "react";

const { Content } = Layout;

function Ornek() {
    return (
        <Layout style={{ margin: 0, padding: 0 }}>
            <Content style={{ padding: "0px" }}>
                <Form autoComplete="off" labelCol={{ span: 7 }} wrapperCol={{ span: 16 }}>
                    <Form.Item name="ghsEtiket" label="GHS">
                        <Select multiple mode="tags">
                            <Select.Option value="1">
                                <Image src="https://pro.kmysistem.com/images/ghs01.png" style={{ width: 50 }} />
                            </Select.Option>
                            <Select.Option value="2">
                                <img src="https://pro.kmysistem.com/images/ghs02.png" style={{ width: 50 }} />
                            </Select.Option>
                            <Select.Option value="3">
                                <img src="https://pro.kmysistem.com/images/ghs03.png" style={{ width: 50 }} />
                            </Select.Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Content>
        </Layout>
    );
}

export default Ornek;

and the result is :

how can I display the whole image in the GHS section. I tried to change the height of select component but it doesn't worked.

• reactjs
• antd

Share Improve this question Follow asked Jan 8 at 9:46 Ufuk UgurUfuk Ugur 34622 silver badges1818 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

finally I did it. ConfigProvider does the trick

here is the final code:

import { ConfigProvider, Form, Image, Layout, Select } from "antd";
import { React } from "react";

const { Content } = Layout;

function Ornek() {
    return (
        <Layout>
            <Content style={{ padding: "20px" }}>
                <Form autoComplete="off" labelCol={{ span: 7 }} wrapperCol={{ span: 16 }}>
                    <Form.Item name="ghsEtiket" label="GHS">
                        <ConfigProvider
                            theme={{
                                components: {
                                    Select: {
                                        multipleItemHeight: 50,
                                    },
                                },
                            }}
                        >
                            <Select mode="tags">
                                <Select.Option value="1">
                                    <Image src="https://pro.kmysistem.com/images/ghs01.png" style={{ width: 50 }} />
                                </Select.Option>
                                <Select.Option value="2">
                                    <img src="https://pro.kmysistem.com/images/ghs02.png" style={{ width: 50 }} />
                                </Select.Option>
                                <Select.Option value="3">
                                    <img src="https://pro.kmysistem.com/images/ghs03.png" style={{ width: 50 }} />
                                </Select.Option>
                            </Select>
                        </ConfigProvider>
                    </Form.Item>
                </Form>
            </Content>
        </Layout>
    );
}

export default Ornek;

本文标签： reactjsjust part of image is displaying in antd select componentStack Overflow