195 questions
5
votes
1
answer
76
views
DateTimePicker doesn't work withDropdown while inside modal
I have a large application that is written in Dash with Dash Bootstrap Components (dbc). The problem is that dbc only has datepickers not datetimepickers, so I looked to Dash Mantine Components (dmc) ...
- 276
0
votes
0
answers
37
views
Styling on DateInput on ReactJs
I'm encountering an issue with my ReactJs application where I'm using MantineUI's DateInput component. I'm trying to apply custom styling to my calendar popup/ dropdown, but it is not working as ...
1
vote
1
answer
204
views
I have a Mantine Datatable that works well with my API but the sort icon doesn't flip when I sort
Here's my datatable page. It's not really styled or anything yet, I wanted to get my repeatable templating pattern down. So far, everything works perfectly except sorting. Sorting DOES talk to my API ...
- 329
1
vote
0
answers
34
views
Mantine 7 searchable Select inside iframe (Flutter desktop) traps focus and prevents selecting new option after scrolling
I'm embedding a Mantine 7 Select component inside an iframe (used in a Flutter desktop app), and I'm facing a very specific bug with the searchable mode.
🔍 The Issue
After a user selects an option ...
- 271
2
votes
1
answer
218
views
Dash loading component: how to have spinner appear in the correct place on initial load
On initial load, the spinner is very high up on the page (I guess because no figure has been created yet). On subsequent loads (whenever a new option is selected from the dropdown), the spinner is in ...
- 3,539
1
vote
1
answer
193
views
How to add text to Dash Loading (dcc.Loading) component
I'd like to use one of the built-in spinners in dcc.Loading but add some text underneath the spinner/loader while it's active.
import time
import plotly.express as px
import dash_mantine_components as ...
- 3,539
0
votes
0
answers
87
views
How to change Mantine multiselect options-filtering in Python
I've developped a small dash app that allows user to plot several charts depending on dropdown inputs.
I first used bootstrap dropdowns, but it could not handle the large amount of options (~7000)
...
- 1
1
vote
1
answer
140
views
Data not rendering in Mantine's Select Component
The cities data is coming from an Api cityOptions is being logged to
the console, but
when I try to show it in the UI in a dropdown, no data shows.
const cityOptions = cities?.map((city) => ({
...
- 11
0
votes
0
answers
65
views
Force color scheme for a component independently from MantineProvider
Mantine has robust theming capabilities, including color schemes. Nevertheless, I have not been able to figure out how to force a particular color scheme for a section of the page (a component and its ...
- 4,468
0
votes
0
answers
27
views
How can I make gradient animated progress bar? [duplicate]
I'm using mantine lib and imported Progress component:
<Progress
className={styles.progressBar}
value={progressValue}
size="xl"
radius="md"
animated
/>
I want to make ...
- 1
0
votes
0
answers
39
views
Mantine's YearPicker : How to Add an Indicator (or other component) on Top of Specific Years (v7)
I'm using Mantine v7 and trying to customize the YearPicker component to style specific years and add an indicator (like a small dot) above them when a condition is met.
Since renderYear is not ...
1
vote
2
answers
476
views
SCSS Module Styles Only Work with next dev --turbo
I’m using Next.js 15 (with the app directory) and Mantine 7 in my project. I'm styling Mantine components using SCSS modules (*.module.scss), but the styles behave inconsistently depending on how I ...
- 271
3
votes
1
answer
169
views
Width of notifications from mantine in react app
So, I have problem with notifications width, despite using lines from mantine docs, with of notifications is 100% all the time.
App.tsx:
<MantineProvider defaultColorScheme="dark">
...
- 53
0
votes
1
answer
123
views
how to change submenu on sidebar of mantine double sidebar
Hi I am following the component of double sidebar by mantine but struggle to change the submenu based on the selection.
import { useState } from 'react';
import {
IconCalendarStats,
...
- 1,980
-1
votes
2
answers
290
views
Mantine React Combobox how to get key. form dowpdown option [closed]
const listOptions = filteredOptions.map((item) => (
<Combobox.Option value={item.label} key={`${item.id}`}>
{item.label}
</Combobox.Option>
));
return (
<...
- 433
0
votes
0
answers
221
views
Changing disabled status of input based on another input value using Mantine uncontrolled form
I'm using Mantine uncontrolled form and I'd like to have two NumberInput components to have their disabled props changing depending on the selected value of a NativeSelect.
The two inputs to be ...
- 270
0
votes
1
answer
660
views
Next.js 15 Client and Server Side Validation With Mantine Form and Server Actions
I am using Mantine form for my UI and client side validation: https://mantine.dev/form/validation/
Here is an example of using it:
import { useForm } from '@mantine/form';
import { NumberInput, ...
- 600
1
vote
1
answer
532
views
Changing mantine TextInput error border color
Is there a way to use a selector to change the border color for Mantine V6 TextInput when the error is set?
I can do this by setting the borderColor within the sx object as follows:
<TextInput sx={{...
- 71
1
vote
1
answer
357
views
Tooltip gets hidden in Mantine-React-Table
I have a standard Mantine React Table and I want to add a tooltip to on of the Action Icons and the column headers. However, when I do, they are cut-off by the length of the column. How can I make ...
- 13
0
votes
2
answers
1k
views
Hover color override for Mantine (v7) Button not working
I have this simple button using React and Mantine for testing an issue I have (v7.13.3)
import React from "react";
import ReactDOM from "react-dom/client";
import { MantineProvider,...
1
vote
2
answers
279
views
react-router-dom actions and mantine useForm conflict?
Is there a conlict between react-router-dom actions and useForm? For example, I'm exploring an Authentication form from mantine. I want to leverage react-router-dom actions. When I replace form with ...
- 16.5k
1
vote
1
answer
2k
views
React, Mantine, CSS Modules Do Not Load Properly
I'm developing a React project with TypeScript and Mantine. I'm using CSS Modules for styling components. However, at seemingly random times, the CSS stops loading (as far as I can observe from ...
- 198
1
vote
0
answers
830
views
Best way to make font sizes responsive in Mantine UI
In mantine UI <Text> component you can set the size of the text by using the size prop, which takes a size from the mantine theme and is a value like sm or xxl.
My question is this ... for ...
- 2,755
0
votes
1
answer
175
views
Grid displays content as rows and not columns
I have a very simple index.tsx file which should render a grid with several columns and rows.
I am taking the example code as is from: https://v6.mantine.dev/core/simple-grid/
This is how it should ...
- 5,534
0
votes
1
answer
317
views
Making tooltip top z-index
I am using Mantine-React-Table and I have an ActionIcon that I want to be on top layer, but by default is seems to get hidden by the length of the row. I want a tooltip or similar to appear when I ...
- 13
1
vote
0
answers
37
views
Updating Components
I have a modal that changes out Select components from Mantine UI based on user input.
When I click on Select by County I want the MultiSelect to be disabled by default. (Done)
When the user selects a ...
- 439
0
votes
0
answers
73
views
Broken tailwind classname when built to production, NextJs 14
Im working on a project using:
Next.JS 14.1.0
Tailwind 3.3.2
MantineUI 7.6.1 as my UI library
Everything works find when I build my components when running next dev. But when the app is deployed to ...
- 1
2
votes
0
answers
655
views
How to highlight a Row in the mantine react table?
I want to highlight the whole row of the react mantine table on given condition for example if a value is mismatch in a cell I want to highlight the whole row.
my code looks like
this is I tried
const ...
- 21
2
votes
1
answer
513
views
Mantine Flex Stack and Image -- image not showing
I want to render a preview image horizontally next to two vertically stacked inputs. If I was using simple CSS, I would do it like this:
#container {
display: flex;
height: 40px;
width: 100%;...
- 15.5k
0
votes
1
answer
224
views
Can't customize Mantine Calendar with function/statement
I am new to the Mantine library and I want to customize their calendar so it will shown red dates when any of the rooms is occupied. The database and other behind it is working, I tried it on react-...
- 3
1
vote
1
answer
1k
views
Using MantineProvider with React Router
I am writing a website in ReactJS and I am using Mantine for styling. When I try to use react router as seen below, the mantine components no longer work.
import { StrictMode } from 'react';
import { ...
0
votes
1
answer
1k
views
How to set different colors for body and paper in mantine?
I've encountered an issue while working with Mantine UI library. When I set the background color of the body, the background color of the Paper component also changes to the same color. However, I ...
- 5,388
2
votes
1
answer
414
views
CSP directive blocking style src to load in react js mantine
I'm using mantine version 6.0.13 and vite
I'm facing issue after applying the CSP directive in header, mentioned below
CSP"Content-Security-Policy","default-src http://localhost; style-...
-1
votes
1
answer
1k
views
Can't change Z index with Mantine Pop over component styles
Summary
I'm trying to update the popover component styles in my Mantine project so that the z-index is 1 instead of 300, but I can't seem to make it work. The backgroundColor style works correctly, so ...
- 561
5
votes
1
answer
490
views
mantine ui connect to the next js project, it get 404 error line
`> next dev
▲ Next.js 14.2.4
Local: http://localhost:3000
✓ Starting...
✓ Ready in 3.6s
○ Compiling / ...
✓ Compiled / in 5.8s (717 modules)
GET / 200 in 6145ms
○ Compiling /_not-found ...
...
0
votes
1
answer
610
views
How to Add Space Between Two Texts in a Mantine Badge Component?
I use Mantine UI + Talwind CSS to write Components.
I'm trying to add space between two texts in a Badge component so that one text is aligned to the left and the other to the right. Here is my ...
- 3
4
votes
2
answers
5k
views
What's the recommended way to click away from a dialog with Playwright?
I'm writing a web app that uses Mantine's <Modal> dialog component. The modal shows an overlay on the background when opened. Clicking on the overlay causes it to close.
I am trying to write a ...
- 75
0
votes
1
answer
286
views
How to manage notification with one state
This is a React project with Mantine's Notification System demo. It has a lot of function components using notification.
const A = () => {
useEffect(() => {
notifications.show({
// ...
- 2,698
0
votes
1
answer
503
views
React Mantine Carousel is frozen
I am new to React and I am trying to implement Mantine components into my Project. One of these components is the Carousel component which is frozen in my scenario. I really don't know why and I hope ...
- 1
1
vote
0
answers
751
views
How to get error on my object instead of its properties in Zod
I have a schema for an object like to:
const formValidationSchema = z.object({
...otherFields
user: z.object({
id: z.number({ required_error: "Choose a user" })
type: z.object({
...
- 1,485
1
vote
1
answer
668
views
How to properly nest CSS classes in CSS modules? [duplicate]
Let's say I have the following CSS module:
.someClass {
background-color: yellow;
}
.someClass .mantine-Checkbox-inner {
background-color: green;
}
This will be converted to something like:
....
- 906
0
votes
1
answer
198
views
Next.js navigating between two different layouts doesn't unload imported styles
With my Next.js 14 app (using app router), I am having public accessible area, where I use Tailwind for styling, and then admin area, where I want to use Mantine component library. However, while ...
- 1
3
votes
1
answer
539
views
Update dmc slider text style - plotly dash
How can the ticks be manipulated using dash mantine components? I've got a slider below, that alters the opacity of a bar graph. I know you can change the size and radius of the slider bar. But I want ...
- 392
1
vote
2
answers
230
views
Intelij mantine breakpoints not found
we using mantine components inside our react project, I have register mantine breakpoints with help of mantine documentation and it looks like this:
module.exports = {
plugins: {
'postcss-preset-...
- 155
3
votes
1
answer
870
views
Mantine LineChart tooltip is showing up transparent
I am using the Mantine LineChart component and the tooltip is not showing up like the examples.
Below is my code. I cannot figure out what makes it different from the demo code on https://mantine.dev/...
- 135
0
votes
1
answer
283
views
Clicking a tagsinput dropdown option causes my menu to close
I am using Mantine as a UI library and I have a send icon button that opens a Menu. This menu then contains a TagsInput component where I can select multiple email addresses.
The problem I have now is ...
- 105
2
votes
1
answer
812
views
Does every page wrapped in Mantine's AppShell become client rendered?
I am working on a project using NextJs and Mantine, and I'd like to take advantage of Mantine's AppShell to structure my pages.Since AppShell wraps around the entire page and Mantine's components are ...
- 29
5
votes
1
answer
10k
views
How to change body bg color for light and dark mode Mantine UI
How do I customize mantine background colors for body in theme object?
I am trying to achieve something like this
const theme = createTheme({
colors: {
// Light mode colors
light: {
...
- 53
0
votes
1
answer
2k
views
Mantine menu item not working as expected
We are using Menu component to show navigation menu on top. It works fine, however, for menu item, the click area is restricted to only where we have text. If we click on the remaining area then the ...
- 3,267
0
votes
2
answers
709
views
Is there a way to solve this TypeScript & Mantine not-assignable DateValue error?
The project dependencies are as follows:
"dependencies": {
"@mantine/core": "^7.6.2",
"@mantine/dates": "^7.6.2",
"@mantine/form"...
- 49