Questions tagged [antd]

This tag should be used for any questions regarding the Ant Design. It is an enterprise-class UI design language and React-based implementation.

Filter by
Sorted by
Tagged with
1 vote
0 answers
14 views

Antd Menu with Beautiful-dnd trouble

In a working project, I need to wrap the and menu component in an ivt. Having tried to do this, I got unpleasant behavior. The bdd logic works correctly, but the visual component does not. I've been ...
Dell Opp's user avatar
1 vote
0 answers
15 views

antd preload raw default layout when lagging

Help me fix this bug! I'm using Ant Design, I've installed the language, but when the page loads, it renders Raw characters once. After refreshing, it displays the normal language again.enter image ...
lusbnz's user avatar
  • 11
0 votes
0 answers
13 views

Antd: Mirror value in other field

I'm creating an dashboard for viewing MySQL data. For each field, you can click on it and get a popover when you can build MySQL WHERE statements. It looks like this: const { Button, Form, Input, ...
user22009348's user avatar
0 votes
0 answers
30 views

How to change width of expandable "+" column?

I am use antd Table with expandRow. Tried different styles, but they break neighboring cells. It didn't work out. there is nothing in the documentation on this issue. I want to reduce the size of the ...
100Pudof's user avatar
-2 votes
0 answers
22 views

React-js question (multi step form by selecting option)

if I fill profile form and select gender option, the continue button should navigate the selected option form . for example if I select Male and click continue button the form should navigate to Male ...
Omar Omar's user avatar
0 votes
0 answers
21 views

Antd: Multiple addonBefore?

I'm creating an dashboard for viewing MySQL data. For each field, you can click on the "filter" button to get a popover when you can attach filters. The filters become the WHERE statement. ...
user22009348's user avatar
0 votes
0 answers
13 views

In Ant Design Menus, how do I scroll to the specific menu item based on the current location

Similar to VS Code's "Reveal in explorer view" feature, which lets you scroll to the specific file in the explorer view, I was wondering if it is possible to do something similar in the antd ...
Ayush Shrestha's user avatar
1 vote
0 answers
41 views

Next.js - Flickering issue with Antd Tabs

I'm facing an issue with my Next.js application where I use antd Tabs and the useGetBookingsQuery hook for fetching the relavant data. The problem occurs when switching to the "Favourite" ...
Abdülber Kaya's user avatar
0 votes
1 answer
22 views

How to delete option of autocomplete antd

I want to have a delete icon next to the antd autocomplete options to delete those options and here is my code const options = [{ value: 'Burns Bay Road' }, { value: 'Downing Street' }, { value: '...
Nguyễn Hữu Thuật's user avatar
-1 votes
0 answers
45 views

Create a basic Social Media Web App using React JS, TypeScript and Ant Design libraries

I need only the frontend part: Sign Up, Log In and Log Out Create a new post (only textual content) View all posts View posts created by the user Like and Bookmark any post Comment on posts Edit/...
Siddharth Goswami's user avatar
3 votes
2 answers
76 views
+50

is there a way to make red border disappear ant design upload

I am using the Upload component antd. For any reason it shows the upload file in red even though when submit image successfully change. I try returning false from beforeUpload but if I do this while ...
Estherak23's user avatar
0 votes
2 answers
77 views

Unable to bind an object as a value for Select component (Ant Design) in react js

I have an issue while selecting the object as value for Select component (Ant Design). This is what I'm trying to do import React, { useEffect, useState } from "react"; //Other imports ...
Nagaraju Kasarla's user avatar
0 votes
1 answer
22 views

Antd: Dynamic Form + pre tab

Using Ant Design, I'm trying to build a Dynamic Form, where each Form Item consists of a single input field with a pre tab. Here's a codepen showing where I'm at so far. I've got dynamic form, and I'...
user22009348's user avatar
-1 votes
0 answers
57 views

SyntaxError: Cannot use import statement outside a module Nextjs Antd [closed]

I am using version 5.11.5 of Ant Design in a Next.js project. However, when I try to build, I encounter the following error logs, and the commonly suggested solutions did not solve my problem. How can ...
Cansu Altun's user avatar
0 votes
1 answer
36 views

How to limit Ant InputNumber maxLength

I am using antd InputNumber component. I wanted to set the maxLength but it doesn't work . I also tried to do it with max attribute to limit the charachters at 12. But none of them worked. ...
Konul Memmedova's user avatar
-4 votes
0 answers
41 views

What is the difference between "" and undefined in Javascript? [closed]

I am testing AntD allowclear method on a form. After I enter a value and clear it, I want to verify that the value is actually cleared. But if it is not cleared, I want to return false. I initially ...
Henna S's user avatar
1 vote
1 answer
52 views

NextJS with ant design, msal Jest setup problem (Cannot use import statement outside a module)

I'm new to Jest setup, I've setup Jest based on nextjs with Jest example https://github.com/vercel/next.js/tree/canary/examples/with-jest here is my jest.config.js const nextJest = require('next/jest')...
Kai's user avatar
  • 9
1 vote
1 answer
49 views

Remove Padding from antD Dropdown menu item

There is no prop to apply styles to an ant design menu item. I need to remove padding by altering the antd styles of menu item but my selectors are not doing that: Code Sandbox const StyledDropdown = ...
Kyle McReynolds's user avatar
0 votes
0 answers
13 views

Is there any way to customize interactions function of ant design charts?

I have tried to make function that highlight plot when mouseover event is triggered. So I put interactions option 'element-highlight-by-x'. First of all, it doesn't do anything. I found that is doesn'...
loveloper.dev's user avatar
0 votes
0 answers
43 views

Ant design time picker autoselect time

When you have clear TimePicker from antD library and try to select time, for example clicked on hours and then minutes and seconds select automatically, how to avoid that? I couldn't find any solution ...
Mikssx's user avatar
  • 1
0 votes
1 answer
51 views

How to remove red from antd upload

I am using the Upload component antd.For any reason it shows the upload file in red even though when submit image successfully change. I try returning false from beforeUpload but if I do this while ...
Estherak23's user avatar
1 vote
0 answers
16 views

How can I make distance of both column short(narrow) in Ant design chart?

I think gap of both column chart in a group is so big. Is there any way to make it narrow ? I couldn't find in those: https://ant-design-charts.antgroup.com/en/api/plots/common/theme https://ant-...
loveloper.dev's user avatar
0 votes
1 answer
26 views

Configuring TimePicker in Ant Design to Display and Select Time in 'HH:mm' Format

How can I configure the TimePicker component in Ant Design to always display and select the time in the "HH:mm" format, regardless of whether the user enters the time in the formats "HH,...
MohammadHossine Rezazadeh's user avatar
1 vote
1 answer
44 views

Ant Design - How can I disable a specific hour/minute in a rangepicker based on the date?

I have a rangepicker: <RangePicker changeOnBlur={true} onChange={horas} disabledDate={datasImp} disabledTime={horasImp} placeholder={["Begin", "End"]} showTime=...
João Pedro Oliveira's user avatar
0 votes
0 answers
13 views

Antd Autocomplete options: NVDA announces 'blank' instead of text

I'm using Antd Autocomplete options to populate recent searches on a search bar like this: ` //substituting process with dummy data for stackoverflow const recentSearches = [ { label: "hello&...
Yashi Arya's user avatar
0 votes
0 answers
19 views

Failed to parse source map in my terminal in vs code

It said failed to parse source map after using import antd/dist/antd.css I tried looking for the source map so that I can rectify the issues since chat.openai.com provided me ways how to rectify it ...
dglory1's user avatar
0 votes
0 answers
10 views

Why Next-Auth provider disabled my Antd Style

i just implemented Next-Auth and Antd design for my NextJs 13 The struture of Root Layout like this const RootLayout = ({ children }: React.PropsWithChildren) => ( <html lang="en">...
Lê Thái's user avatar
  • 101
0 votes
2 answers
23 views

Antd Tooltip gets stuck when component moves onclick

I have a button with an Antd tooltip, like this: <Tooltip title="Some text"> <button onClick={openNotes}><Icon icon="notes" /></button> </Tooltip> ...
nick's user avatar
  • 2,869
0 votes
0 answers
17 views

Ant vue Table, Draggable columns

Is there a built-in tool in the Ant Vue Table component for making columns draggable? From my research, it seems there is no such feature available. I attempted to use vuedraggable, but encountered ...
joseph.o's user avatar
0 votes
1 answer
33 views

How to automate moving two headers in a horizontal Ant Design step range slider using Cypress?

I have been trying to move the two headers of an Ant design step range slider using the cypress automation. It was for selecting a salary range in our project, so to filter salaries based on the ...
Ruwanthi Gunathilaka's user avatar
0 votes
0 answers
42 views

How can I reset the table pagination to the beginning whenever the search keyword changes or the page limit is modified?

I'm working with a React and Ant Design (antd) generic table and have created a useTableData hook to supply data to various tables in my application. Currently, the table is functional, but it has ...
user20202116's user avatar
-1 votes
0 answers
27 views

Datepicker from antd not working in node16

We were using node12.0v in our react project for a long time. Package.json had node-sass,python2 dependency and antd version in package.json was 4.0.0v. Recently we switched to node16.0v.Using the ...
Padmaja's user avatar
  • 109
1 vote
0 answers
20 views

ant design image crop not cropping

I use antd image crop i follow the code but the result only upload the full picture not the cropped picture. How to make the crop function work? Did i miss something? please tell me if you know what i ...
Shitta 25's user avatar
0 votes
0 answers
43 views

react testing library render table got undefined

vendorTable.tsx import React, { useState } from "react"; import { Table } from "antd"; import * as QC from "api/Cache/VendorMemberManagement"; import * as Request from &...
Lin FangTzu's user avatar
0 votes
1 answer
39 views

Change Ant Design Skeleton loader color gradient

I need lighter shades of grey to use with the skeleton loaders. I tried directly overriding the CSS, like so: .ant-skeleton-content { .ant-skeleton-title { background: ...
SSR's user avatar
  • 13
0 votes
0 answers
18 views

Antd Time RangePicker Exclude specific datetimes

I'm finding it very unclear if what I'm trying to do is possible out of the box with ant design. I have an array of moment ranges: [ { start: Moment(), end: Moment() } ... ] And I have a basic ...
SpeedOfRound's user avatar
  • 1,221
0 votes
0 answers
12 views

dynamic input box present within Form, loosing focus with typing single character

I am new to react and I need to achieve following: Requirement my application will have 1 config file. "my-extension": { "TitleVariables": [ {"...
soumava sarkar's user avatar
0 votes
1 answer
27 views

antd Form inside modal does not submit in reactjs

I am trying to submit a form inside a modal form but the form does not submit and does not show any errors. I have two forms in component. when the user click on the button it opens upd the modal so ...
etranz's user avatar
  • 1,051
1 vote
0 answers
15 views

Antd timePicker keeps showing date when loading the data by using form.setFieldsValue

when I trying to load time string "14:00:00.000+08:00" into the antd timepicker component, the timepicker keeps showing the date with the time. Looks like the date is auto added by dayjs. I ...
YiTong Shao's user avatar
0 votes
0 answers
41 views

How to display parent node and child node side by side with TreeSelect in Ant Design?

This is my code. I want to show the parent node tag and the child node tag side by side <Form.Item label="Organization" name="organization" ...
Tanvi Narkhede's user avatar
1 vote
1 answer
44 views

Use different theme on antd design token

Is there a way to get the text color of both the default and the dark theme with the design token? I would like to be able to switch between the two, without changing theme, depending on a condition. ...
Heavenly Journey's user avatar
0 votes
2 answers
77 views

How can I set the selected row color in an Antd table in Reactjs?

I have an Ant table in React as follows: <TableAnt dataSource={mysource} columns={mycolumns} onRow={(record, rowIndex) => { return { onClick: event => { ...
Luci's user avatar
  • 31
0 votes
1 answer
40 views

How to restrict antd onValuesChange to only one field

I am trying to get the value on input phone when the user types in the value on the input field. I used onValuesChange but I found out that this it affects other fields as well If I type on username ...
etranz's user avatar
  • 1,051
2 votes
1 answer
59 views

How to create a transaction history based on time in React Firebase

I have a website display like this: Place to input transaction data If the submit button is clicked, the data sent to the API will be like this: { "-NjE-07WS5julczaO0ZD": { "...
Balimo's user avatar
  • 29
-1 votes
2 answers
58 views

How to put the special string to the bottom when using table sorter

I want the special string '--' always at the bottom regardless of the direction ascending or descending. The sorted results I expect are: Ascend: ['1.1', '1.2', '1.3', '--', '--'] Descend: ['1.3', '1....
Lin Du's user avatar
  • 91.9k
0 votes
1 answer
22 views

Antd input not displaying default object data name

The Problem: So i have a searchable input that the user can use to lookup a family from the database, antd displays the selectable options and the search works, itll return the search results. however ...
Austin Howard's user avatar
0 votes
0 answers
28 views

How do I pass information between react-js components without re-rendering?

I have a page with two relevant components on it: a tree decomposition graph and a details pane: screenshot of components The user should be able to click on a node of the the graph, which will fire ...
BrenD's user avatar
  • 1
0 votes
1 answer
47 views

Create an array of IDs from an object [duplicate]

I would like to iterate an object to get an array with IDs values (like this). const initialState = useMemo(()=> { return dataTable.filter(result => favorites.some(favorite => result....
Margarita Logatskaya's user avatar
0 votes
1 answer
48 views

is it possible to delay the validation until the user stops typing for 500ms?

Here is the codesandbox link: https://codesandbox.io/s/distracted-paper-nxjxft?file=/src/App.js we are now validating the input on change, and its happening immediately as the user types, is it ...
Mamunur Rashid's user avatar
0 votes
0 answers
25 views

Ant Design Bar Chart Label size adjust programmatically

Hi I develop a stacked bar graph component using @antd/plots, now the problem is when the value is less than 15 or 10% the label of that graph is overlapping. I want to adjust the size of label of the ...
Dave's user avatar
  • 23

1
2 3 4 5
105