News Articles antd

Next js problem with @ant-design/charts, error

I work on a large project (monorepo). The technology stack is next, apollo graphql, antd desing. I wanted to add @ant-design/charts package, but it crashes me error below. I have run out of ideas for repair: c Error on page: ../../node_modules/@antv/xflow/dist/index.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: ../../node_modules/@ant-design/flowchart/es/graph/index.js Terminal: […]

The function created by useCallback didn’t receive latest value of the dependency

I know this question has been asked many times, and I know how useCallback works, but my question is related to antd UI framework(Or maybe it doesn’t matter). I made a minimal, reproducible example: import React, { useState, useCallback } from "react"; import ReactDOM from "react-dom"; import { Form, Input, Button, Table } from "antd"; […]

How disable selected option when it been selected in react with antd?

I’m using antd in react render a form with dynamic add and remove form.item. In each form.item I’m trying to set an option which the day disable when it been selected in previous form.item. So I was thinking about maybe I can use state that can set the day disable. const [weekDays, setWeekDays] = useState({ […]

How to change the tab dynamically in VUE ant design

I have been using Vue ant design for a problem. I have a tabs component but the problem is that I can’t find a way to change the tab dynamically. This is a simple example. I have a timeout of one second to update the tab. As you may notice the tab changes but the […]

how do I change the width of the header border of antd modal

Modal: Need the change the border width to half of the modal or any custom px. The antd-modal-header class has a .border-bottom but changing the width is changing the height or making the border look bold but not the size. Source: CSS – Stack Overflow

how do I change or override a antd element style

I need to change a antd form element style i.e label and select, but by changing antd element css (antd-form-item) its changes all the elements associated with it. Adding inline style also doesn’t work, also tried creating its own classname but still doesn’t work Source: CSS – Stack Overflow

Remove and override css popover

How I can remove auto generate CSS, left: to zero for all element style POPOVER antd because it will make responsive broken. here is my code < Popover style = { { zIndex: 9, left: 0 } } overlayStyle = { { left: 0, zIndex: 9 } } visible = { formState.baby1 } placement = […]

Ant table check box selection issue in different table, want to prevent from check the checkbox in one table and another table

i have a issue with ant table rowselection checkbox issue, i have loop the ant table component based on tags, each tags has list of keywords, here some keywords are repeated in different tags, in any of the table i check one keyword, in any where of the table the same keyword is repeated that […]

Dropdown menu not inherit its parent position

<div className="inner-dark-section"> <div className="search-section" style={{ width: "100%", position: "sticky", top: "0", zIndex: 10, backgroundColor: "#1b1b1b", paddingTop: "25px", }} > <RepSearch queryProcessor={processQuery} currQuery={currQuery} /> </div> </div> have two dropdowns (antd) in ResSearch component but the dropdown menu is not inherited it parent position as it’s not sticky when scrolled it scrolled over RepSearch elements. .ant-select-dropdown { […]

Navbar not working properly in ant design

I am creating a project using React and ant design. I have created the navbar but it is not getting rendered properly. I am able to select an option but I cannot deselect it (like shown in the image, the project is in the initial stage so everything is a little misaligned). You can view […]

number formatting in antD tables, or localeCompare() number strings with commas

I have values I want to display in an AntD table. I want them to be sortable, but also formatted with commas, like "1,000". Ideally I would store them in React state as integers, and then format them as strings with commas upon display, but I haven’t found a way in AntD tables to do […]

How to use date range picker of Ant Design Vue component library together with data-fns?

Is there a way how to import data-range (using date-fns) component in Vue 3 using Ant Design component library? I am able to import date-picker, but not range-picker. import ADatePickerFns from "ant-design-vue/es/date-picker/date-fns"; I tried everything, search everywhere – but without success. Can anybody help? Thanks a lot! Source: Vue – Stack Overflow

Is it possible to use `class-validator` with antd `Form.useForm`()?

I have created a DTO object with class-validator: export class CreateItemDto { @IsString() @Length(2, 63) readonly name: string; } Is it possible to use it in Form.useForm() in Ant Design or I have to create rules on my own as following? const [form] = Form.useForm<CreateItemDto>(); return ( <Form form={form}> <Form.Item label="Name" name="name" rules={[{ required: true, […]

value prop does not show data in Input in Ant Design

I have a Ant Design form and Data is being fetched from an API and I want to show that data in that form.I am setting the value prop in ant design <Input/> field like <Input value = {value.project_name}/> but the input field is empty. The value.project_name is coming from an API. Why is this […]

State Change after Filtering Table Data In Nextjs Ant Design

I am trying to implement custom search filter on my Table Component in ant design, and I am getting the filtered data when I console.log(filteredData), but the table component state does not change. I have used Use Array.filter() with String.includes() for filtering Question How can I use my Table component inside My search Component to […]

React – Ant Design Dynamic Data does not binds to Select

I am using react for a school project. The dynamic data does not binds to Options from Ant Design, react js. The result is an empty option list. In actual the data comes from an external API. For testing purpose I assigned the data the state variable. The data comes in 2D array, so I […]

Ellipsis on antd long text

I am using antd library for my frontend. I want to display the address in the below format. How can I do it with antd library? When Address text is small 123 Example Street, #111 Toronto, ON When Address text is long 123 Long long Long Long Long Long Long Long long Long Long Long […]

Antd table Horizontal scroll should move on onclick

Hi I’ve been working on this for 3 days now I’ve tried various methods to solve none worked the thing I want to move the table to right using the click of a button I am using antd table in this table the header and first four columns should be fixed while scrolling only rest […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.