filling 100% width of website using mantine

Question

My goal is to have my header and content to be 100% of the width of the page. I have no css files but instead am using mantine for styles. I've tried editing widths to 100% on different components with no luck. The end goal once I've got my page using 100% width is using display grid to organise my components in columns. I would like my WeatherComponent to fill the full width so say gridColumnStart: 1 to 4 TodoList to start and end 1 to 2 and NewsComponent to start and end 2 to 4. This is my dashboard where components are rendered:

import { Container } from '@mantine/core';

import { Group } from '@mantine/core';
import NewsComponent from '../components/NewsComponent';
import TodoList from '../components/TodoList';
import WeatherComponent from '../components/WeatherComponent';

const Dashboard = () => {
  return (
    <Container style={{ display: 'grid', gap: '20px' }}>
      <Group style={{ gridColumn: '1 / span 3' }}>
        <WeatherComponent />
      </Group>
      <Group style={{ gridColumnStart: 1, gridColumnEnd: 1.5 }}>
        <TodoList />
      </Group>
      <Group style={{ gridColumnStart: 1.5, gridColumnEnd: 3 }}>
        <NewsComponent />
      </Group>
    </Container>
  );
};

export default Dashboard;

And this is my WeatherComponent which is basically serving as my Header:

import axios from 'axios';
import { Weather } from '../types';
import UserForm from './UserForm';
import { Title, Text, Container } from '@mantine/core';
import { useEffect, useState, createContext } from 'react';

export const WeatherContext = createContext<any>(null);

const WeatherComponent = () => {
  const [weather, setWeather] = useState<Weather | null>();
  const fetchWeatherData = async () => {
    const response = await axios.get('http://mock-api-call/weather/get-weather');

    setWeather(response.data.result.weather);
  };

  useEffect(() => {
    fetchWeatherData();
  }, []);

  return (
    <Container>
      <WeatherContext.Provider value={weather?.forcast}>
        <UserForm />
      </WeatherContext.Provider>
      <Title order={2}>Today&apos;s Weather</Title>
      <Text size="lg">
        {weather?.forcast} with a low of {weather?.min} and a high of {weather?.max}
      </Text>
      <Text size="md" data-testid="description">
        {weather?.description}
      </Text>
    </Container>
  );
};

export default WeatherComponent;

Ideally I'd like to use mantine stylings to reach 100% and not create a css file to style *.

Irresolvable

Please provide a MINIMAL reproducible example. – Erythritol

Answer 1

Solved! I changed the width of the WeatherComponents Container to 100% and it fixed the issue.

in WeatherComponent

return (
    <Container style={{ width: '100%' }}>
)

Irresolvable

Please mark your question as solved. – Erythritol

@IgorGonak I'm not able to for 2 days – Irresolvable

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Indiscretion

doesn't work, mantine enforces max-width on the container element – Avoirdupois

When using mantine, it is best to use available features, and only when that is not an option, introduce such custom styles. In this case, the fluid option in other answer, is actually better, and should be the right answer, instead of this answer of applying 100% width. Also note, that in case you notice either of these is not working, (e..g the comment regarding mantine enforcing max-width), look for constrained width element up in the hierarchy. Your element maybe getting 100%, but something above it is constrained to smaller width, from where the max-width is coming from. – Actinometer

Answer 2

To prevent mantine from enforcing max-width on the container element, use the fluid prop on the container.

return (
    <Container fluid>
    {content}
    </Container

)

Punkah