0
342
ViewsHow to position antd notification - i want it to be centered
Im using this
export function notificationWithIcon(type, title, description, placement) {
notification[type]({
message: title,
description: description,
placement
});
}
However, the only options are topRight, bottomRight, bottomLeft or topLeft
I would like it to appear in the center of my screen. Is there any way to achieve that
EDIT: I used Majid's idea and this is how it looks like now. It's still positioned a bit to the right
·
Juan Pablo Isaza
1 answers
Answer question0
Based on documentations:
A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport.
But you can customize it yourself with css classes:
.ant-notification-center {
left: 50%;
bottom: 50% !important;
margin-right: 30%;
transform: translate(-50%, -50%);
}
and use the notification same as following sample:
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, notification, Space } from "antd";
import { RadiusUpleftOutlined } from "@ant-design/icons";
const openNotification = (placement) => {
notification.info({
message: `Notification ${placement}`,
duration: 10000,
description:
"This is the content of the notification. This is the content of the notification. This is the content of the notification.",
placement
});
};
ReactDOM.render(
<div>
<Space>
<Button type="primary" onClick={() => openNotification("center")}>
<RadiusUpleftOutlined />
center
</Button>
</Space>
</div>,
document.getElementById("container")
);
·
Juan Pablo Isaza
Report
Answer question