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.
Related
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;
}
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 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;
}
I am having a hard time trying to prevent the overflowing text inside a codeblock. The problem seem to be only with codeblocks, which ignores its parent container width.
As per the example below, when editing using a codeblock the text is not breaking into new lines when reaching the end of the container.
https://codesandbox.io/s/1oqr4xyy6j
Demo - https://codesandbox.io/s/r4qx32m8wm
I made this change in rich-editor.css
CSS
.RichEditor-editor .public-DraftStyleDefault-pre pre {
white-space: normal;
}
You can add the following to your CSS:
pre {
overflow: hidden;
}
Working example here.
I am using angular-bootstrap-calendar but a do not want that hover that indicates the number on the left.
Is there a way to disable it ?
Tried using the config parameter calendarConfig.i18nStrings.weekNumber with no effect.
Thanks a lot "!
calendarConfig.i18nStrings.weekNumber = null;
You can put
#cal-week-box {
display: none;
}
in your css for an easy fix, it doesn't look like you can disable it with code.
This should work for the latest version:
.cal-week-box-cell {
display: none;
}
how you can read here