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.
5,209
questions
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 ...
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 ...
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, ...
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 ...
-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 ...
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. ...
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 ...
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" ...
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: '...
-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/...
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 ...
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
...
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'...
-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 ...
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.
...
-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 ...
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')...
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 = ...
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'...
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 ...
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 ...
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-...
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,...
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=...
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&...
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 ...
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">...
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>
...
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 ...
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 ...
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 ...
-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 ...
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 ...
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 &...
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: ...
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 ...
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": [
{"...
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 ...
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 ...
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"
...
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.
...
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 => { ...
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 ...
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": {
"...
-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....
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 ...
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 ...
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....
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 ...
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 ...