Questions tagged [antd]
The Ant Design is a remarkable framework that caters to diverse queries related to UI design. Renowned as an enterprise-class UI design language, it mesmerizes users with its React-based implementation.
Hello, I am currently working with Vue and Ant Design. I chose to use the Collapse Component from Ant Design, which can be found here: . However, I have encountered an issue with the Collapse.Panel component. The prop "header" is specified as a string, but ...
After receiving a response from the antd datepicker and successfully sending it to the backend, I encountered an issue. The response is automatically sent to the backend as soon as a date is selected. However, I want the request to be sent only after click ...
My current challenge lies in setting error messages retrieved from the Laravel backend and displaying them on each field that has an error. The data structure for the errors is as follows: { 'errors': { 'email' : ['The Email field is required'], ...
My objective is to use the ant design Menu component to highlight the navigation menu item of the current page. However, it seems that no matter which page I am on, the menu item does not get highlighted. Below is my code for the navigation menu. import ...
I am currently encountering a challenge in developing a directory tree using <ul> element, particularly when the text of an item exceeds the width of the container. As I am utilizing the antd React library for this project, my options are somewhat l ...
Currently, I am conducting end-to-end testing on an Angular project that utilizes Ant Design (NG-ZORRO). In this project, there is a button with the class nz-button that, when clicked, opens the file explorer just like an input type="file" element would. W ...
My modal is causing all inputs to be re-rendered with every change I make while typing. I have a Formik object set up like this: const formik = useFormik({ enableReinitialize: true, initialValues: { sp_id: data?.id, ...
I have been using the redux-form-antd library and facing some confusion with validation. Specifically, for an Input component, I have implemented the following code: import { Field } from "redux-form"; import { TextField } from 'redux-form-antd' ...
In my app using Next.js v10.0.4, I have implemented an expandable table from antd design version 4.10. When clicking the + button in the table, it should only open the selected row, but for some reason, all rows are opening simultaneously. This is how my ...
My application is a dashboard app built with React, Redux, and Antdesign. I utilized the layout provided by Ant design at https://ant.design/components/layout/. One issue I encountered is that when clicking on side menus, the active menu gets bold but upo ...
I am working on a React app that has a checkbox to disable a datepicker. However, when I use the checkbox to disable it, I am unable to select any date. If I remove the checkbox and its function, there is no error. Currently, the error message I am getting ...
Struggling with customizing antd in my react app. I'm hesitant to mess with the webpack config.js file since I'm not well-versed in webpack. My goal is to avoid having a site that looks like a generic antd clone, but all my attempts at customization have f ...
Currently, I am in the process of building a component library using react js, vite tailwindcss, and antd. The components function flawlessly when running the project locally or within Storybook. However, upon importing them into another nextjs application ...
I'm currently experimenting with the code found at https://github.com/adarshpastakia/ant-extensions/tree/master/modules/searchbar Although I followed the tutorial instructions, I encountered an error. Could it be that the library is malfunctioning? It see ...
I'm currently working on creating a table with dynamic rowspan in Ant design (data will be dynamic). Here's the data I have: I want to display it like this. Can anyone offer some assistance? [{"col1":"temp1","col2":"1","col3":"x"}, {"col1":"t ...
Upon refreshing the page on Next.js with Antd CSS, I am experiencing a delay in applying the styles. The content appears misaligned right after the reload. Is there a way to fix this issue? I suspect it may be related to SSR, but unfortunately, I have not ...
To activate sorting on a column, simply use the sortDirections parameter with values ['ascend', 'descend']. With these settings, there are three sorting possibilities: 'ascend', 'descend', and 'unsorted'. ...
While utilizing Ant Design and a Custom Stylesheet, I have encountered an issue where the style appears broken upon first load. However, if I navigate to another page and return to the original broken page, it displays correctly. This problem only occurs d ...
I am facing an issue with the 'name' attribute in my Ant Design Select component. When trying to set the 'name' attribute, I encountered an error message that is causing issues. https://i.stack.imgur.com/Lzb4t.png Ant Design Select Component interface Pr ...
According to the Ant Design documentation: Starting from version 4.20.0, a simpler usage <Menu items={[...]} /> is provided with enhanced performance and the ability to write cleaner code in your applications. The old usage will be deprecated in th ...
Currently, I am developing a React web application primarily used on mobile devices. We have an input field and our goal is to ensure that the first letter entered is not automatically capitalized. The input field can still contain capital letters, but ...
Can a className prop be included in the Form.Item validation? <Form.Item name="username" rules={[ { required: true, message: '...' }, className="customValidation" //<- attempting to add a className but it is not functioning ...
After completing a tree design utilizing Ant Design, I encountered an issue where certain nodes within the tree needed to act as links. Despite my attempts to directly assign links, they were not functioning properly. array.map((node) => { if(node.t ...
I am currently attempting to manually change a field to an error or warning state after the form has been submitted. However, I am unable to locate a function similar to setFieldError on the form hook. In the image provided, my goal is to set the email f ...
When the Ant Design Popconfirm modal is opened, the Confirm ("Yes") button is already preselected. https://i.stack.imgur.com/bs7W7.png The code for the modal is as follows: import { Popconfirm, message } from 'antd'; function confirm(e) { c ...
Just diving into the world of Material UI for web development. As a user of antd, I'm looking for a way to display error messages similar to message.error(antd popup) without having to embed it in the render section and call it as a simple function. How ca ...
Troubleshooting the simulation of a click event on the Menu component using Antd v4.3.1 Component: import React from 'react' import PropTypes from 'prop-types' import { Menu } from 'antd' import { SMALL_ICONS, PATHS } from '../../constants' export co ...
After creating a hook that successfully toggles between light and dark modes in Chrome's Rendering panel, I noticed that the values in the ConfigProvider remain unchanged when switching themes. Can anyone suggest a workaround to modify the design token for ...
I have recently started working with NEXT JS and I am encountering a peculiar issue for which I haven't been able to find a solution online. The warning message I'm getting is: "Each child in a list should have a unique key prop." Warning: Each c ...
Recently delving into React, I've dedicated the past week to honing my skills. My current project involves creating a straightforward application featuring a 'product create' form alongside a product list equipped with a search bar (utilizing the Input com ...
I am working with React using the Next.js framework, and I've integrated the antd npm package for components like tables and menus. However, I'm facing an issue where the CSS is not loading for these controls. What could be causing this problem? import R ...
Using the upload feature within an antd form component has presented me with a challenge. <Form name="posting" onFinish={onSubmitForm} scrollToFirstError encType='multipart/form-data' > <Form.Item name="images& ...
I am looking to expand a specific row of a table in antd design. Assuming that everything else is working as expected, I need the second row with the name 'B' to be expanded on data load. Below is a sample JSON: let tableSourceData = [{ key : 1, name ...
I'm facing an issue with updating a parent element when the children's onChange event is triggered. Specifically, I have an Ant Design Select and Table inside a Tab that are not reflecting changes in the pageSize value. Although setPageSize function was f ...
I have a function called loadProfile that I need to execute within the useEffect hook. When this function is triggered, I want the name Mario to be automatically displayed in the input field labeled name. How can I set this default value using the antd lib ...
Currently, I find myself including the following code snippet repeatedly throughout my project: // eslint-disable-next-line @typescript-eslint/no-explicit-any const handleCreate = (input: any): void => { saveToBackend({ title: input.title, oth ...
Presently, this is the UI https://i.stack.imgur.com/CMvle.png App.tsx import "./styles.css"; import MyTable from "./MyTable"; export default function App() { const data = [ { key: "1", date: "2022-01- ...
I am currently exploring the integration of react-hook-form with the antd <Input /> component I am encountering an issue where reset is not functioning correctly with <Controller /> Below is the code snippet: const NormalLoginForm = () => ...
Is there a way to call a custom function on a Formik field when using the onChange event? I've tried calling it but it's not working as expected. Below is my custom function within a React Component: onStudentScore = (value, form) => { ale ...
Utilizing the antd alert component (ts) with styled components import styled from 'styled-components'; import Alert from 'antd/es/alert'; export const SAlert = styled(Alert)` && { margin-bottom: 24px; border-radius: 14px; border: ...
I'm currently working on a project using NextJS and Antdesign for the frontend development. As I attempt to create a basic login feature utilizing the Form components provided by AntDesign, I am encountering a barrage of errors. Specifically, I am see ...
Having trouble with integrating the rsuite daterangepicker and antd's daterangepicker into a React Material UI Dialog/Modal. The date picker popup seems to either not show up or appear outside of the modal window. Take a look at the image below: Click Her ...
During the registration process using React and Antd, if the backend returns the error message "user already registered" after clicking on "Sign up", it should be displayed in the form. You can customize the display as shown below: An example of how the u ...
As a newcomer to a React & ASP.NET project, I am facing a challenge in displaying upload status notifications. The task may seem simple, but I need help in figuring out how to create popup notifications that indicate which files have been successfully uplo ...
I am currently working with Antd and emotion within a Next.js project. I want to access the Antd theme variables (which are written in Less) from within a component. Here is an example of what I would like to achieve: const StyledButton = styled(Button)` ...
When trying to set the defaultValue in a Select component, TSlint throws an error - Type 'string' is not assignable to type 'ChangeEvent<HTMLInputElement> | undefined - for the code snippet below: const App = () => { const [ mont ...
I need help dynamically rendering data into an antD expandable table. The data I have is a nested object with different properties - const values = [ [name = 'Josh', city = 'Sydney', pincode='10000'], [name = 'Matthew', city = 'London', pincode = ' ...
Utilizing the form list component from antd in my react.js project https://ant.design/components/form/#Form.List I have a basic form list set up where I can easily add or remove fields. At times, I need to reset the form and remove any additional items t ...
Seeking a solution to display events on an Ant Design Calendar using dateCellRender with dates stored in a variable object. Here's an example of the object: [ { "id": 1, "content": "Example", " ...
This current issue is reminiscent of a problem we faced in the past. Here is the link to the relevant discussion: Github Discussion Currently, I am utilizing Next.js 13 and Ant Design V5. When loading Ant Design components, they initially appear as unstyl ...
Is there a way to retrieve the key of a single element in the table instead of getting undefined? How can I extract the id? Check out this link for more information. const [select, setSelect] = useState({ selectedRowKeys: [], loading: false, }); ...
I have been experimenting with customizing the scrollbar appearance of an ant design table. Currently, the scrollbar always displays as shown in this demo: https://i.stack.imgur.com/vlEPB.png However, I am trying to achieve a scroll behavior where the sc ...
Upon attempting to launch the project post-cloning the repository from GitHub and installing dependencies using yarn install, I encountered an error. Updating react-scripts to the latest version and typescript to 4.1.2 did not resolve the issue. Node v: 1 ...
I am currently utilizing the Table Component of Ant Design v2.x and unfortunately, I cannot conduct an upgrade. My concern lies with the inconsistent formatting of numbers in row-edit mode. In Display mode, I have German formatting (which is desired), but ...
One scenario I'm facing involves having 2 tables in my database. Let's say I delete a row (Role) from the Role Table. The question is, how can I also remove the particular role ID associated with the deleted role from the User Table? The User Table contai ...
I have a table displaying student information and I want to be able to select multiple checkboxes. However, currently, I can only select one checkbox at a time. How can I achieve selecting multiple checkboxes? class StudentTable extends React.Compo ...
I've created a form that includes a Form.List component for adding songs to an album. My goal is to enforce the requirement that every album must have at least one song, but unfortunately, Form.List only has the props name and children. Is there a w ...
Compilation Error. /app/node_modules/@ant-design/icons/lib/components/AntdIcon.d.ts TypeScript error in /app/node_modules/@ant-design/icons/lib/components/AntdIcon.d.ts(2,13): '=' expected. TS1005 1 | import * as React from 'react' ...
I am currently developing a Next.js application with webpack5 and incorporating the Antd framework for the UI. However, I am facing an issue where the styles are not being applied. Even though I can see the Ant classes being applied to buttons in the dev t ...
In our project, we are using antd version 4.22.8 and recently upgraded React from 17 to 18. However, after the upgrade, certain antd basic functionalities like tooltips and checkboxes stopped working in development mode due to React's StrictMode. I ca ...
I've been working on a new feature to switch themes (light/dark) dynamically in a Next.js application using Ant Design. Successfully integrating the theme switch with a toggle switch and useState hook, I'm faced with the challenge of storing the ...
I am currently working with an array of values and looping through them to display in a Select Option. <Form.Item label="Status"> <Select value={user.status} onChange={handleStatusChange} > ...
I'm currently utilizing the simple antd Uploader dragger component and passing props beforeUpload to prevent the uploading of certain file extensions. Here's the code snippet: const props = { name: "file", multiple: true, ac ...
Currently, I am utilizing Next.js and antd's layout components to create a dashboard-style page using their Layout component. However, I have encountered two issues related to styling (CSS) in this setup: Footer appearing within the Content: I am wo ...
insert image description here According to the documentation, the date range picker is supposed to display two months on the calendar, but it's only showing one month. I carefully reviewed the documentation and made a change from storing a single va ...
In my Ant Design table, I have a toggler button in each row. When the user clicks on it, I want to add or remove a specific class from that row's parent element. While there are ways to do this with vanilla JS, I am working with the React library and pref ...
Is there a way to create a button that can expand or collapse all tabs in an ant.design Collapse component? I attempted to modify defaultActiveKey but it seems like this can only be done during page rendering. If possible, could someone share a code snip ...
Currently, I am working on integrating charts from antd into my TypeScript application. Everything runs smoothly on localhost, but as soon as I push it to GitHub, one of the tests fails: FAIL src/App.test.tsx ● Test suite failed to run TypeError: ...
Is there a way to adjust the font size based on the breakpoint in Antd React? <Text type={"secondary"} style={{fontSize: '36px'}}>Message for {userName}</Text> ...
In my React app, I am utilizing both MaterialUI and AntD as the UI component libraries. I have integrated Material UI's full-screen dialog and attempted to include AntD's select within the dialog. Unfortunately, it seems that the select list does not rend ...
I want to create React Components using Ant Design and showcase them in Storybook. Both the components and storybook are functioning correctly as expected. modal.stories.js import React from "react"; import { action } from "@storybook/addon-actions"; im ...
I've been utilizing antD's notification API for a while now, but in my latest project, I've switched to MUI. To streamline error handling for API requests, I'm using a shared Axios instance that includes onSuccess and onError methods. I ...
Incorporating antd into my NextJs app, I have implemented a Layout component at the top level of my application. /* _app.tsx */ function MyApp({ Component, pageProps }: AppProps) { return ( <Provider store={store}> <SideMenuLayout> ...
Within my card component, I have included a Next.js Link that contains the body and footer of the card. The cardFooter section consists of an Ant Design DropDown menu with two items - Share and Report. Despite implementing preventDefault and stopPropagatio ...
Need Help! I encountered an issue while trying to run my nextapp with antd design. It's giving me an error about needing a less loader, so I checked out this https://github.com/SolidZORO/next-plugin-antd-less and also this https://github.com/elado/next-wi ...