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.
Related
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
},
}}
Is there a way to preserve line breaks from user input. At the moment I am just getting the user input sending it to mongoDb and returning that text. However if my input is :
"new
line",
my output would be "new line".
Can anyone suggest a fix?
Use css white-space for styling it.
.foo {
white-space: pre-line;
}
a small addition to #FELIXMOSH's correct answer: also use word-wrap because white-space property can cause overflowing sometimes. And apply this css to the element that will host the mongodb data.
anyClass {
white-space: pre-wrap;
word-wrap: break-word;
}
I wrote this code in a less file:
.page-cartPage .jc-banner .row-height > .col-xs-12:first-child {
display: none; }
But I don't see the right behaviour.
Is this written right for less?
This is pure CSS, what you can do is, trying to take the parent div of the div you want to display:none then make like my example:
.myparent .col-xs-12:first-child{
display:none;
}
I hope I helped you.
I am using Stylus version 0.44.0...
I have simplified this example, but here is my issue:
color-all-the-things()
div
{block}
body
+color-all-the-things()
background: red
Is being compiled to:
body +color-all-the-things(){background:#f00}
It is essentially treating the block mixin like a selector.
The expected output is:
body div {
background: red
}
According to the examples on the front page of the stylus project (http://learnboost.github.io/stylus/docs/mixins.html#block-mixins) the syntax is as follows:
Mix-in definition
foo()
.bar
{block}
Mix-in use
+foo()
width: 10px
Result
=> .bar {
width: 10px;
}
So in your case I guess it would be as you wrote it:
color-all-the-things()
div
{block}
...
body
+color-all-the-things()
background: red
Since that also produces the expected output in the online editor (http://learnboost.github.io/stylus/try.html) we can assume you got it right ;)
All I can think of it check your toolchain. Make sure you have the latest stable release, or downgrade to one. Or if you do try upgrading to the latest development release. It specifically says that this feature is in a "rough state" in the docs so it's fair to assume there might be some problems with it in recent versions.
If the problem persists open an issue: https://github.com/LearnBoost/stylus/issues
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.