Whitespace Issue (image)
Hi everyone! I've got this issue for a long time now, tried many things, and still can't solve it. So, this is a React-Router project and the issue is this whitespace I don't understand.
I've searched in dev tools (Chrome) and there's nothing that overflows the normal width
This only happens on the first page, until the "You above all" section
I've removed all components until the "You above all" and still it appears
Here're the links:
Website: https://andre-rd-rodrigues.github.io/wheretofindme
Repository: https://github.com/andre-rd-rodrigues/wheretofindme/tree/main/src
I would much appreciate your help. Thank you and stay safe :)
I solved it ,its in your services component and you component , I solved like this
.services-row {
overflow: hidden;
}
#you-div {
margin: 100px 0;
overflow: hidden;
}
Related
In my react app, I have a big piece of generated code (110k lines) to show on screen (an openapi json spec). I wrapped it in a <pre> tag with:
overflow-y: scroll;
word-wrap: break-word;
white-space: pre-wrap;
font-family: monospace;
height: 100%;
This <pre> has a parent <div> which set the height to something like 800px so it can scroll.
This used to work well, but recently chrome hang completely when displaying it. It works on Brave and Firefox without any issues. Strangely, the code is shared on server, if I type the url of the server and display the code directly (no react, just basic code display), chrome behave normally. It automatically wrap the code in a <pre> just like I do, with the same css style, except for the height:100%; I wonder what the hang in my application all of a sudden.
Thanks for any help.
Used react-virtualized list with chunks of data. Not ideal, but good enough for our purpose.
I am using Material-UI in my react application. Recently, I updated my packages to the latest version. Now, when I open a dialog in my application, padding-right: 17px; will be added to the body tag.
I also checked the Material-UI site, and this is happening on their website too with dialogs.
Is this a bug with the new version of Material-UI?
How can I remove this padding from the body tag when opening a dialog?
Update: This padding will be added to the body tag with Drawer, Menu, Dialog, and Popover components.
as it was mentioned by #Reins you can use disableScrollLock property. The thing is sometimes this property is nested on components's input so you need to use inputProps in order to set it. Here is an example with Select component:
<Select
className={classes.select}
inputProps={{MenuProps: {disableScrollLock: true}}}
...
/>
Sometimes you may want to dig into MUI codebase in order to figure out how to apply some nested element's properties.
Just give disableScrollLock={ true }.
I think it will solve the issue because I had the same.
I added disableScrollLock prop to my Dialog Component.
It worked.
You can use a mui-fixed class for handling this issue, it's helpful for me.
Here is a link for material UI mui-fixed document :
https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened
Hope this will help anyone.
For me the solution was to add
overflow: auto;
to the #root selector:
#root {
... other css that was there before
overflow: auto;
}
I add in my main css file the following snippet of code and I get rid of body margins:
body {
margin: 0;
}
I realized this came from a parent Container. I just added this and it worked for me. Also realized this is adaptive to screen size, so this code is applied to all the sizes from xs and up breakpoints.
sx={{
[theme.breakpoints.up("xs")]: {
padding: 0
},
}}
I have a problem with one page on my gatsby site.
If I go to that page from any other then it renders fine. But if I follow a link directly to it, or refresh the page once loaded then it does not render correctly. All of the other pages render fine. The one thing different about this is the use of flex display layout.
Looking at the page structure, it's rendered differently. HTML looks pretty much the same, but the classes and class attributes set by gatsy are different.
This is the page in question: https://www.hazardousfrog.com/contact-us/
If someone could take a quick look and let me know if this is a gatsby issue or something I have done wrong, I'd very much appreciate it.
After looking at it I believe it may be an error on your end. I look at both pages in separate tabs, one rendered correctly and one not. With the developer tools I inspected the form components and saw that they were loading completely different styles. I wouldn't be able to tell you exactly what is causing this, but if I had to guess it could be that you have styles or classes that are overriding one another.
//the form style when it is NOT rendered correctly
.jss9 {
margin: 0;
border: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;
}
//form styles when it IS rendered correctly
.jss357 {
display: flex;
flex-wrap: wrap;
}
EDIT: short story I made a code sandbox:
https://codesandbox.io/s/928m541rny?fontsize=14
open in Safari for mac and you will see this if you stretch a little bit the window:
If you click on the text, it justifies correctly.
I have a very intriguing bug on Safari for mac (12.0.3), the text doesn't properly justify (screenshot 1) at first render, it only correctly justifies after clicking on it (screenshot 2).
I am using React with Material-UI and overriding the style of all my body2 directly in my theme.js file as follow:
body2: {
textAlign: "justify"
}
This implementation works correctly on Chrome. The string is coming from my backend which retrieves it from google firestore. The new lines are represented by \n characters. I am looking to solve this issue and not find a work around (as replacing \n character by <br /> html tags)
What I tried:
searching for issues related to text-align: justify on Safari
trying to play with the text-justify property
I actually have no clue where to look to solve this and never had a bug of this sort (change of css after click without any onClick logic implemented.). That's why I listed so many tags, because I have no real idea for the moment.
After clicking on it, it displays correctly:
Additional information:
<Typography paragraph>
{description}
</Typography>
I also override the root Typography like this (if I don't, new lines from firestore strings are not displayed):
MuiTypography: {
root: {
whiteSpace: "pre-line"
},
body2: {
fontSize: 15,
textAlign: "justify"
}
},
There is a link to the page, that has this problem: http://www.klds.cz/aktuality
This is how it looks in every modern browser:
And here is how it looks in IE7 and lower:
Enyone knows what's going on? Thanks.
Your clears need to be changed. I've had a LOT more cross browser success by using overflow: auto; than any clears. Try the below, it worked in my test.
Remove .clearer by commenting it out.
.clearer {
/*CLEAR: both*/
}
Add a new entry to main.css to allow it to overflow properly
.news_main .item {
overflow: auto;
}
I tested a copy of your site with the changes on IE7 and that resolved it.