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 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 the Ant design components for React.
I would like to fixe the size of the multi selection input fields in order to have the selected values into the same line without taking a new line like is the default behavior :
https://ant.design/components/select/#components-select-demo-multiple
I need to have the values ranged into the same line.
I can fixe the size of the input fields by overriding the style
.ant-select-selection--multiple:before, .ant-select-selection--multiple:after {
display: inline !important; }
But when I select several values, then they are outside the inputr field.
Finally I found a solution by adding this css style options :
.ant-select-selection--multiple
{
white-space: nowrap;
height: 30px;
overflow: auto
}
Thus the div is looking like an input text field and when the content ground a scroll appear at the right side of the div field.
You can specify maxTagCount
<Select
mode="multiple"
maxTagCount={1}
>
// here is rendering of the Opitons
</Select>
I am trying to create a responsive image wrap gallery. Each image will have a header. I distribute them using column-count of webkit.
The problem is this: I've specified a container to be "relative". Inside that container, I have an "absolute" header followed by an image. What seems to be happening in some values of column-count is that the header is going to another column and the image in the next. I need them both to be together at all times and I'm surprised why the absolute within relative container is not doing that.
A codepen for reference: http://codepen.io/pliablepixels/full/YwWLzy/
The core image gallery code is:(SO insists I include a code fragment when posting a codepen link, so here goes)
<div style="-webkit-column-count:{{ cols }};-webkit-column-gap:0px;line-height:0px;">
<span ng-repeat="image in images">
<div style="position:relative">
<div class="my_header">Header</div>
<img class="scaled_image" src={{ image.src }} />
</div>
</span>
</div>
Please change the column values and note the header behavior.
How does one solve this? (Note I must use an img tag - can't use background-image)
thanks
Columns
To protect elements from breaking and keep them entirely in a column you can add these properties:
.element {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
Your fixed example http://codepen.io/anon/pen/rxMWxa
Header
Such behaviour occurs because you've added line-height:0px to your container div. So you can just return header's line-height value to normal. Fixed that in codepen.
Using line-height sometimes can make headache. Try to use padding like below:
.my_header {
background-color: red;
padding: 2px 4px;
line-height: normal;
}
I'm making a responsive site and need to include a Facebook Like-Box for the client's Facebook fanpage. The developer page for the like-box has a widget for customization, but it doesn't allow you to set a width in percentages.
I've searched around and the closest I've got was this page from 2010, which refers to a fb:fan widget that allows you to link custom CSS. I tried to get this tutorial to work but it fails with this error:
<fb:fan> requires one of the "id" or "name" attributes.
So, to recap, I need a Facebook Like Box that I can either set up to be fluid, or which allows me to pass custom CSS to the iFrame it generates. Anyone able to point me in the right direction?
I found this Gist today and it works perfectly: https://gist.github.com/2571173
/* Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ */
/* This element holds injected scripts inside iframes that in
some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
You thought it couldn't be done? AHA! Have at you, Facebook and your wicked fixed-width ways: I wrote a JQuery script to undo all your evil!
$(document).ready(function(){
var fbWidth;
function attachFluidLikeBox(){
// the FBML markup: WIDTH is a placeholder where we'll insert our calculated width
var fbml = '<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>';//$('#likeBoxTemplate').text().toString();
// the containing element in which the Likebox resides
var container = $('#likebox');
// we should only redraw if the width of the container has changed
if(fbWidth != container.width()){
container.empty(); // we remove any previously generated markup
fbWidth = container.width(); // store the width for later comparison
fbml = fbml.split('WIDTH').join(fbWidth.toString()); // insert correct width in pixels
container.html(fbml); // insert the FBML inside the container
try{
FB.XFBML.parse(); // parses all FBML in the DOM.
}catch(err){
// should Facebook's API crap out - wouldn't be the first time
}
}
}
var resizeTimeout;
// Resize event handler
function onResize(){
if(resizeTimeout){
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(attachFluidLikeBox, 200); // performance: we don't want to redraw/recalculate as the user is dragging the window
}
// Resize listener
$(window).resize(onResize);
// first time we trigger the event manually
onResize();
});
What is does is it adds a listener to the window's resize event. When it resizes, we check the width of the Likebox' containing element, generates new XFBML code with the correct width, replaces the containing element's children with said XFBML and then trigger the Facebook API to parse the XFBML again. I added some timeouts and checks to make sure it doesn't do anything stupid and only runs when it needs to.
Much has changed since the OP.
By simply choosing iFrame and setting your width to 100%, your FB Like Box should be responsive.
Basically FB adds this to the iFrame:
style="border:none; overflow:hidden; width:100%; height:300px;".
Been struggling with the exact same problem. A quick & simple solution is to use the iframe based Facebook Like box.
<iframe class="fb-like-box" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&height=500&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
Note the assigned 'fb-like-box' class and all the removed inline styles. The class for the iframe could look something like this:
.fb-like-box {
width: 100% !important;
height:500px;
border:none;
overflow:hidden;
}
Looks like it doesn't matter what the height and width are that are defined in the iframe's src tag. Just place the iframe into some fluid element like a cell in a CSS grid layout.
(includes ideas from: http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/)
I used the HTML5 version of Facebook Like Box and here is what worked for me:
.fb-like-box,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
width:100% !important;
}
You cannot set the like-box to anything other than a pixel width. My suggestion is to place it in a DIV or SPAN that is fluid with overflow set to hidden. Sure, it's going to crop off part of the like-box, but by having the requirement of fluid, this is your best bet.
Here's a small work around that appends the HTML5 Facebook LikeBox Plugin into the DOM with a response height or width.
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class='fb-like-box'
data-href='"+page_url+"'
data-width='"+widget_width+"'
data-height='"+widget_height+"'
data-colorscheme='dark'
data-show-faces='true'
data-border-color='#222'
data-stream='true'
data-header='true'>
</div></div>");
});
The comment above from Ed and Matthias about using 100% for the iframe worked great for me. Here is my iframe code
ORIGINAL WITHOUT FIX:
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&
width&height=290&colorscheme=dark&
show_faces=true&header=true&stream=false&
show_border=true&appId=XXXXXXXXXX"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; height:290px;"
allowTransparency="true"></iframe>
UPDATED WITH 100% FIX:
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&
width&height=290&colorscheme=dark&
show_faces=true&header=true&stream=false&
show_border=true&appId=XXXXXXXXXX"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; height:290px;width:100%"
allowTransparency="true"></iframe>
The only change is adding "width:100%" to the style attribute of the iframe
note that the code above has "XXXXXXXXXX" in place of the unique references