I am currently tranfering my CRA project into a NextJS app. Unfortunately I am facing a weird bug. The MUI props get overwritten from the globals.css file. I would like to fix this issue so the css class is not overwritting the MUI pros anymore.
The css class is called default-flex:
.default-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
Example MUI code:
<Box sx={{display: {xs: "flex", lg: "none"}}} className='default-flex'>
<Button variant='contained'}>Click me!</Button>
</Box>
Also, if I would add something like justifyContent: "left" to the Box, the css class would overwrite it with justify-content: space-between;
What happens when running this code is that the Box is always visible (display is flex coming from the css class). It should normally only be visible on xs devices.
I was following this tutorial => https://dev.to/hajhosein/nextjs-mui-v5-tutorial-2k35
Template repo => https://github.com/HPouyanmehr/muxt
I hope someone can help me!
Related
I'm designing a product page on Wordpress, using the Elementor and Woocommerce plugins.
I got a product data tabs made of an unordered list items from Woocommerce that shows the Description, More info and Reviews horizontally, and I'd like to style it to appear vertically with the Description, More info and Reviews text in the right of the tabs/titles.
This is the page I'm working on: This is my product page.
And I'm trying to make the Product data tabs similar to those here: This is the model page I'm learning from.
I tried to add this code in Atom, the program I'm using to edit the CSS code of the website, but it didn't help much:
.woocommerce div.product.elementor ul.tabs {
display: inline-grid;
}
.tabs .wc-tabs {
display: inline-grid;
}
.woocommerce-Tabs-panel .woocommerce-Tabs-panel--description .panel .entry-content .wc-tab {
display: inline-grid;
}
.woocommerce .elementor-4060 .elementor-element.elementor-element-6b584e4 .woocommerce-tabs .woocommerce-Tabs-panel {
display: inline-grid;
}
Can I customize the unordered list to make it vertical like in the example I'm learning from with just CSS, and to have that black line under the title from the model page that grows bigger only on hover? Editing the HTML file is a bit harder since I'm working in Wordpress and I'm not customized to doing that but I could try, and I don't have any knowledge of Javascript yet (if it's required, though I can edit the Javascript file of the website).
If you inspect the code, you can see that this styling is causing elements to align like that. Try to change display to flex
Try this
ul{
display: flex;
flex-direction: column;
align-items: center;
}
so I want to implement 'Read more' on my friend site.
I achieve effect that I wanted but when I started changing the box alignment the 'Read more' effect got hit.
Before: https://codepen.io/szlvga/pen/poNOqpO
After: https://codepen.io/szlvga/details/yLVQQoY
I want it to affect only the box that I'm click 'Read more' button like on the first Codepen and not all the boxes in the row like on the second Codepen.
How to achieve that? Thanks in advance.
Everything is on codepen.
Your jQuery code is correct, the problem is your layouting and more specifically flexbox. Your .row class has align-items: stretch, so when one item expands, all others in the same row will expand to fill the stretched space.
This snippet will fix your problem:
.row {
display: flex;
width: 100%;
flex-direction: row;
align-items: flex-start; /* < Align items to top, don't stretch them! */
flex-wrap: wrap;
}
You can read more on flexbox and the align-items property here.
With react I have created a very simple card component in a Card.jsx file. The component looks like this.
class Card extends React.Component{
render() {
return (
<div className={style.mainContainer}>
<div className={style.container}>
<div className={style.title}>Hello world</div>
<div className={style.value}></div>
</div>
</div>
);
}
}
export default Card
In one of my web app's page I have added two cards, and I space them out with flex display.
The page render:
function Home() {
return (
<div className={style.container}>
<Card> </Card>
<Card> </Card>
</div>
)
}
Container CSS:
.container {
width: 100vw;
height: 100vh;
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
The only problem with this code is that the margin-top in the css is not applying margin to the div. I encountered this problem several times, leading me to not be able to use nor padding nor margin. Can someone help? Thanks.
Image of components not being affected by margin
I found out that trying to reset React's default padding through the following lines of code:
* {
margin: 0 !important;
padding: 0 !important;
}
was yielding the issue. Nonetheless, how can I reset React's default padding / margin without the styling affecting ALL padding and margins in the app?
It's generally a bad idea to override the style properties for a lot of elements (the * selector). But, it is ok to override the user agent stylesheet for specific tags. For instance, Chrome automatically adds a margin to the <body> tag, so you can override the margin property without using !important in React I think.
After you remove the !important overrides, create a separate container class for your Card component. Setting widths and heights of individual flex items can interfere with the flex container layout, and possibly cause margins to collapse.
Add a padding to container
.container {
padding: 10px;
}
I am creating a web app using Vue (3.1.3) and Vuetify (1.3.8). All seems to be fine, but when I do production build, Vue somehow changes the CSS order.
The problem is with classes .v-list__tile__content and .align-end.
In vuetify.css, they are on lines 4844 and 7236 respectively, but after npm run build in dist/css/chunk-vendors.*.css they are on positions 108929 and 100729. This means, that the order in which the styles are applied is switched and this div:
<div class="v-list__tile__content align-end">...</div>
then looks differently on dev server and production.
DEV:
PROD:
The div is generated by this component:
<v-list-tile-content class="align-end">{{ dish.price }}</v-list-tile-content>
The problem is with the align-items: flex-start/flex-end;
Is there some system solution to this? I guess I can override it by directly setting the style, but it might happen again.
Since the order of your CSS is changing during the build (and assuming there is no difference in your code between environments), it seems the order of your css is changed due to minification. Some tools will group selectors by property value, so that:
.foo {
align-items: flex-start;
}
.bar {
align-items: flex-start;
}
Can be turned into:
.foo, .bar {
align-items: flex-start;
}
This could cause the order of your css to change.
It could be useful to share your build configuration as it appears that's where the issue lies.
This seems to be a problem of text direction by language
element.style {
direction: ltr;
}
I am having problems modifying the template for the Android page provided as example(code can be found here). I want to make the navigation bar on top transparent. The problem is there is nothing behind it, so it does not really change. The fix would be to make the navigation bar part of the page. As you can see currently the scrolling bar starts after the navigation bar, while I would like to make the navigation bar be part of the scrollable part of the page. I tried removing all relevant mdl header classes from the HTML which resulted to no effect. I found out that material.min.js (provided as part of MDL) makes the navigation stick on top of scroll bar but I am not very good at JS and I am not sure which part I need to modify to achieve what I want. I am also open to a solution that does not modify material.min.js but uses a custom JS/CSS.
A little help to you.
Same matter happened to me. For a fixed navigation bar which will stick on the top you can do a little trick to the material.css file.
Change the .mdl-layout__header class from
.mdl-layout__header { display: -webkit-box;display: -webkit-flex;display:ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column; and goes on
to
.mdl-layout__header {position : fixed; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column;
The added property is position : fixed; to the mdl-layout__header class
Hope this helps :)