MudGrid: Ensuring precise vertical cell alignment

I'm a newcomer to MudBlazor and struggling with a basic task.

My goal is to create a structured layout resembling a table with a fixed number of cells, like this:

Mountains 5
Lakes     3

The names on the left should be regular size while the numbers are larger, indicated by h4 tags.

"Mountains" and "Lakes" should be vertically centered with their respective values, so that the center of "Mountains" aligns with the center of "5".

This is my initial approach:

<MudGrid Justify="Justify.Center" Class="flex-grow-1">
    <MudItem md="6" Class="d-flex">
        <MudText>Mountains</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">5</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText>Lakes</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">3</MudText>
    </MudItem>
</MudGrid>

However, the "Mountains" and "Lakes" labels appear aligned at the top. How can I center them?

I also have some additional questions:

  • Is there comprehensive documentation available that delves deeper into MudBlazor concepts? The current resources seem to focus mainly on examples without much explanation (like the meaning of enums in Justify).

  • Since I'm new to both .NET and Blazor, would you suggest using MudBlazor for beginners, or is it more suited for advanced Blazor users?

I've had an extensive discussion with ChatGPT, but we couldn't find a solution. The code provided above stems from the beginning of our conversation.

I also explored MudTable, but it appears too complex for my simple requirement.

Answer №1

To vertically align elements, you can utilize the align-items CSS property.

You have two options: either use the component's Style property to directly style it or apply MudBlazor's CSS utility class to the Class property.

Both MudItem and MudGrid function as flexboxes and can be styled accordingly.

Here's how to do it for each element:

<MudGrid Justify="Justify.Center" Class="flex-grow-1">
    <MudItem md="6" Class="d-flex align-center">
        <MudText>Mountains Aligned</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">5</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText>Lakes not aligned</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">3</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex" Style="align-items:center;">
        <MudText>Aligned via Style</MudText>
    </MudItem>
</MudGrid>

Demo 👉 Individual MudItem align

And here's how to apply it to the entire MudGrid:

<MudGrid Justify="Justify.Center" Class="flex-grow-1 align-center">
    <MudItem md="6" Class="d-flex">
        <MudText>Mountains</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">5</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText>Lakes</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">3</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText>Aligned</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex"&t;>
        <MudText Typo="Typo.h4">8</MudText>
    </MudItem>
</MudGrid>

Demo 👉 MudGrid Align

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to trigger a hover effect on a div and its child simultaneously using HTML and jQuery

Here's my concept: I want the text to be contained within div elements with an integrated image, rather than just having fading in and out pictures. Here's my attempt: #first{ position: absolute; } #second{ position: absolute; -we ...

Is there an easy method to compare the CSS styles of a specific section in HTML?

Currently, I am facing an issue where the size of a specific area on my asp.net page changes after a post-back. It seems that the style applied to this area is being altered for some reason. This situation has raised the question in my mind - is there a m ...

The 'utf-8' codec is unable to interpret the byte 0x96 at position 227, as it is an invalid start byte

Recently, I began working with Django. Unfortunately, I encountered an error that I haven't been able to solve. Can anyone explain why this error is occurring? Specifically, I am utilizing {% extends "base.html" %} on my login page. Here is the exa ...

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

Instructions on creating a vertical height adjustment handle for a website

Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/ This is the HTML code: <div class="column"> <div class="top"> ...

Tips for customizing the appearance of a functional stateless component in Reactjs using class objects

I am looking to create a functional stateless component in ReactJs following the guidelines outlined here. const MyBlueButton = props => { const styles = { background: 'blue', color: 'white' }; return <button {...props} sty ...

How to Place Content Below a Fixed Navigation Bar?

Is there a way to insert content below a fixed navigation bar without relying on the margin-top property? Any alternative solutions? I experimented with position: relative and the top property, but I'm looking for a different approach. ...

Toggle Jquery menu with a click of a button

I need help with creating a menu for a forum that opens on click and closes on click. Here is the code I have so far: /*Custom BBPress admin links menu*/ function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) { if ( is_user_logged_in() ) { $me ...

Is there a way to direct the user's cursor to a specific location on the page when they hover over an image?

I'm interested in creating a script that can manipulate the user's mouse position when they hover over an image. For example, if I hover over the image, I want the mouse to be dragged lower towards a specific text. Is there a method to achieve th ...

Place a button to the right side of every row to handle overflow-x

I'm trying to place a button next to each row in my table, but here's the catch: the table is inside a div with a fixed width and overflow-x for responsiveness. I want the button to appear next to each row outside of the container div. Currently ...

I'm curious to know where in the CSS specifications it is specified how multiple properties with the same name should be handled

While debugging an unrelated issue, I want to make sure I understand how a browser is supposed to handle a declaration like background-image: url(image0.jpg); background-image: image-set(url(image1.jpg) 1x, url(image2.jpg) 2x); I tried looking in the CSS ...

Placing two texts alongside a logo in a Bootstrap Navbar: Step-by-step guide

As I venture into the world of Bootstrap, I am on a quest to create a Navbar Component similar to this design: https://i.stack.imgur.com/NidKQ.png I attempted to use the Navbar Image and Text code, but encountered an issue where the text would only displ ...

Stop the span within the paragraph from breaking onto a new line

I have a situation where I need quote symbols to be placed inside span elements that are children of a p element. Each quote symbol requires slightly different CSS styles, and they must be included in the HTML rather than in the CSS due to backend restrict ...

Create a 2-column Product Landing page in Magento with a Grid View option

Looking to create a Product landing page with a two-column layout in grid view, limiting rows to 4. Is there a setting in the backend or can I tweak the catalog.xml for this effect? Curious if the pager and sorter can be customized to fit the same style a ...

aligning buttons vertically within a dual-column design

I'm trying to create a two-column layout, where the left column contains a vertically centered button and the right column is text only. Although I have successfully implemented the two-column layout, I am facing difficulty centering the button due t ...

Switch out a static full-page image background for an engaging HTML5 video

Is there a simple method to switch out a full-page image background with a video? video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) tr ...

Employing jQuery to implement a hover animation on IE9, it functions properly when hovering over but exhibits strange behavior upon exiting

My website features a quote box positioned to the right of the browser. When hovered over, it reveals a list of available dates. I initially tried using CSS transitions which worked on all browsers except for IE - no surprise there. So, I turned to jQuery ...

The resize() function in jQuery triggers a stack overflow exception

I am trying to manage the resizing of a div on my website, but I am encountering a stackoverflow exception when using the resize function. Can someone please help me understand what I am doing wrong? For reference, here is a jsfiddle example: https://jsfi ...

When attempting to print a Bootstrap 4 HTML page in Chrome, the browser headers and footers are being clipped

Currently experiencing an issue with printing an HTML page styled using Bootstrap 4 (Bootstrap 3.3.7 works fine) on Chrome where the header and footer are partly covered up. Take a look at this screenshot to see what I mean - the date, title, and file/url ...

How to style a div's height responsively behind a circle using CSS

Can a CSS pattern be created with responsive design, ensuring that the background line is always in the correct position and height regardless of window size? https://i.sstatic.net/27Tf2.jpg ...