I need assistance aligning numbers and text side by side, similar to the image shown here:
https://i.sstatic.net/gXzOM.jpg
However, there is a margin to the right of the text(MASTER I 406), causing the numbers to not be in the correct position. Currently, I am using transform: 'translateY()' to manually adjust the number placement. This solution breaks when the screen size changes.
Please advise on how to resolve this issue.
https://codesandbox.io/s/still-morning-0q92mh?file=/src/App.js
The MUI Grid layout is a fantastic tool for creating customized UI designs. To set up your layout, you just need one Grid container with 2 Grid items inside. Here's an example of how your code could look:
import { Card, CardContent, Typography, Grid } from "@mui/material";
import RiceBowlIcon from "@mui/icons-material/RiceBowl";
export default function App() {
return (
<Card
sx={{
borderRadius: 7,
marginTop: 3
}}
>
<CardContent>
<Grid container sx={{ alignItems: "center" }}>
<Grid item xs={10}>
<RiceBowlIcon />
<Typography
component="span"
sx={{
fontSize: 20,
fontWeight: 600
}}
>
JohnDoe
</Typography>
<Typography
sx={{
fontSize: 10,
color: "#909090",
ml: 4
}}
>
MASTER I 100
</Typography>
</Grid>
<Grid item xs={2} sx={{ textAlign: "center" }}>
<Typography
sx={{
fontSize: 20,
fontWeight: 540,
mr: 2
}}
>
(+10.00%)
</Typography>
<Typography
component="span"
sx={{
fontSize: 20,
fontWeight: 540
}}
>
10,000
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
);
}
If you want to utilize the Grid system effectively, consider implementing the following solution:
import { Card, CardContent, Typography, Grid } from "@mui/material";
import RiceBowlIcon from "@mui/icons-material/RiceBowl";
export default function App() {
return (
<Card
sx={{
borderRadius: 7,
marginTop: 3
}}
>
<CardContent>
<Grid container spacing={2}>
<Grid item xs={6}>
<RiceBowlIcon />
<Typography
component="span"
sx={{
fontSize: 20,
marginLeft: 1,
fontWeight: 600
}}
>
JohnDoe
</Typography>
<Typography
sx={{
fontSize: 10,
ml: 4,
color: "#909090",
// width: "20%" // Avoid specifying width as it may cause text layout issues
}}
>
MASTER I 100
</Typography>
</Grid>
<Grid item xs={6}>
<Typography
sx={{
float: "right",
fontSize: 20,
fontWeight: 540
}}
>
(+10.00%)
</Typography>
<Typography
component="span"
sx={{
float: "right",
fontSize: 20,
fontWeight: 540
}}
>
10,000
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
);
}
To elaborate further, utilize a Grid with two distinct items for content separation. The left Grid item contains the icon and text, acting as a container, while the right Grid item displays the numerical value '10,000'. By structuring the content in this manner, the left Grid won't interfere with the content on the right.
You can access the updated sandbox version based on your code.
<ListItemText
primary={
<div>
<span>{comment.UserName}</span>
<span style={{ float: "right" }}>10.10.2022</span>
</div>
}
secondary={comment.Comment}
/>
I've been attempting to create an alert component, but I'm facing an issue with adjusting the color of the alert message. Upon enabling dark mode in the navbar (located at the bottom of the navbar component code), an alert message confirming the ...
I am trying to figure out how to create an outline on my button using the primary color, but I'm not sure how to reference it. export const BaseTheme = createTheme({ components: { styleOverrides: { root: { ‘&:focus’: { ...
I am currently working on a springboot application with a React/Typescript frontend. I have defined two interfaces and created an object based on these interfaces. export interface Order { customer_id: number; date: Date; total: number; sp ...
Trying to locate an element and use Capybara for validation. There's a specific element that I want to check for using page.should have_css. <i class="ui-grid-icon-cancel" ui-grid-one-bind-aria-label="aria.removeFilter" aria-lab ...
I am having trouble loading a local HTML, CSS, and JS file in my React Native webview. The CSS is not being applied to the HTML. Here is my folder structure: https://i.sstatic.net/mqYT9.png My HTML file, along with CSS, images, and JS file are all placed ...
Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...
Seeking assistance in creating an autocomplete feature in React using Material-ui, with a unique custom dropdown design including a button labeled Add New Element positioned at the bottom. https://i.sstatic.net/6rY99.png Various attempts have been made t ...
As a newcomer to JavaScript and AngularJS, my question may be considered naive by some. I am currently working on a tutorial project involving AngularJS. Here is the HTML code snippet I am dealing with: <link href="http://netdna.bootstrapcdn.com/boo ...
I'm working with this menu http://codepen.io/alexandernst/pen/oxpGYQ (I wanted to include it here but the result viewer on SO is causing some display issues...) and I am trying to ensure that the second and third level ul elements are the same height ...
I've got a Bootstrap carousel displaying images with different heights, and I'm looking to vertically center these images. My approach involves determining the image height, subtracting it from a fixed height value, and if the result is less than ...
I've been utilizing the filter function in an effort to simplify my tasks. The objective is to modify the closeTime.hours of filter openDay(TUESDAY) In my possession is an array of objects structured like this: buildHours = [ { "openDay&q ...
My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...
Link to Jsfiddle I'm attempting to activate my current scroll while I am outside that scroll, specifically in #DivDet Here is the code snippet of what I have tried so far: $("div#DivDet").scroll(function () { // Still trying to figure out what ...
First and foremost, I would like to apologize for any grammatical errors in my English, as I am Brazilian. Currently, I am working on creating a React test application that renders a to-do task list using the JavaScript map method. However, I am facing an ...
Hey, does anyone know how to use Jquery to add a class when an element is being dragged over a drop area? Here's the HTML code I'm working with: <div class="upload"> <form action=""> <input class="uploadfile" type="file" ...
My webpages contain several tables, and I am looking to add a dropdown feature that allows users to choose between saving the table in either PDF or Excel format. These tables are dynamically generated with the header structured in array form and data sto ...
Greetings! I currently have my frontend (create-react-app) and backend server (express.js) running on separate ports but on the same host. Specifically, my frontend is located at 127.0.0.1:3000 while the backend is at 127.0.0.1:3003. In my package.json fi ...
I am currently working on a large form using React and material-ui. The form implements two-way binding to update the state when input changes occur. Interestingly, changing any input field triggers updates in all components (as observed through TraceRea ...
I am working on a project that involves two components: Cart and CartItem. My goal is to store all prices in the "total" state of CartItem within the Cart component. However, I am facing an issue where when CartItems are rendered using map, they overwrite ...
Within my React app, there is a text input field situated inside a form that displays in its default gray color before any interaction: https://i.stack.imgur.com/FdNos.png Once the input field is clicked on, it changes to white as shown here: https://i.s ...