Using Angular 5 and Firebase, I am storing and retrieving movie review information. When creating and editing the review, line breaks are kept (I assume using an ngModel has something to do with this). However, when retrieving the review from a reader's perspective, the ReviewComponent, the line breaks are not kept. Logging the body still shows the line breaks and using Angular's json pipe shows as text\n\ntext showing where the line breaks should be.
Here is my HTML:
<main role="main" class="container">
<p style="margin-bottom: 2rem;">{{review.body}}</p>
</main>
I have also tried span and body.
How can I keep these line breaks in the review for the reader?
HTML, in general, uses br tags to denote a new line. A plain textarea tag does not use this, it uses whatever the user's system uses to denote a new line. This can vary by operating system.
Your simplest solution is to use CSS
<main role="main" class="container">
<p style="margin-bottom: 2rem;white-space:pre-wrap;">{{review.body}}</p>
</main>
This will maintain any "white space" formatting, including additional spaces.
If you want to actually replace the newline characters with br tags you can use the following regex
<main role="main" class="container">
<p style="margin-bottom: 2rem;" [innerHTML]="review.body.replace(/(?:\r\n|\r|\n)/g, '<br>')"></p>
</main>
Edit Thanks to ConnorsFan for the heads up on replace not working with interpolation.
by using the [innerText] directive the white spaces seem to be maintained, as well as the \n new lines
e.g. <small style="display:block" [innerText]="review.body"></small>
I had a similar situation where I had HTML code like this:
<div>{{msgTitle}}</div>
And I tried putting both '\r\n' and <br> in the string msgTitle, but neither of them worked to put a newline in the text displayed on the page. This link gave me the solution:
https://github.com/angular/angular/issues/7781
Use [innerHTML]="msgTitle" instead of {{msgTitle}}.
try span but set it like that:
span
{
display : table;
}
it should helps.
Related
<div id="container">
<div class="image">< img height="500px"src="./images/image-product-desktop.jpg" alt="">
<p>PERFUMES</p>
</div>
when I add a paragraph the div breaks into two parts, please help.enter image description here
You have to properly write the html markup by opening and closing the tags. The markup you shared has 2 <div> but you only closed one of them, when that happens the html parser of the browser will automatically try to close it for you which may end up doing unexpected results.
I suggest you to use an IDE like vscode and install extensions that will help you properly format your code and identify markup errors.
I have just installed MediaWiki in my server.
When I try to create an article on the Create Article page, all the default <div> tags are being escaped and shown as text on the page, see screenshot:
Excerpt of article HTML rendered by MediaWiki:
<div id="mw-content-text"><p><div class='noarticletext'>
There is currently no text in this page.
You can search for this page title in other pages,
How can I fix this problem?
Thanks!
Most likely because it was so minimal, you did not satisfy all the newline requirements for using <div> in a MediaWiki article. Specifically:
<div> is a generic block container. Rules:
<div> should be followed by a newline
</div> should be preceded by a newline
</div> followed by text on the same line, two newlines and text before <div> on the same line should be avoided (because the two newlines only produce a space)
From Help:HTML in wikitext, https://meta.wikimedia.org/wiki/Help:HTML_in_wikitext#.3Cdiv.3E
Recommendation
Fulfill the newline requirements, for example in MediaWiki source for that article, write:
<div class="noarticletext">
This is on a new line, fulfilling the rules, so this div should now render.
</div>
Preview or save to view the results.
I am using Expression Engine to develop a site. I have created the page I want in a template file and now I am making use of EE's tags to make the content dynamic.
{exp:channel:entries channel="test123"}
{test123}
<div class="panel" style="margin-bottom:10px;">
<div class="paneldiv" style="background-color: red;">
hello there
</div>
</div>
{/test123}
{/exp:channel:entries}
The above code makes my DIV disappear. But if I remove the tags, the DIV shows up.
Its also worth noting that when the tags are in and I click "view rendered template" the DIV shows up.
Very strange! I've been bashing my head all day!
I believe you are using the {test123} tag incorrectly. First, I'm assuming that {test123} refers to a Channel Field within the 'test123' Channel. If so, then you simply need to remove the {/test123} ending tag, as data field tags are usually single-variable tags.
The reason your div content is disappearing is that EE is failing to process {test123} as a variable pair, and therefore it doesn't show the content within.
I have a section of HTML that I would like to be editable with CKEditor but in 2 different pieces.
Ideally I would want my HTML to look like:
<div class="page-header">
<h1>
<span>Heading</span>
<small>Subheading</small>
</h1>
</div>
where the subheading would be displayed on the same line as the heading and each are editable separately. This looks fine without CKEditor enabled.
One attempt was to hack the editor to enable span and small tags: (Enable CKEditor4 inline on span and other inline tags)
CKEDITOR.disableAutoInline = true;
CKEDITOR.dtd.$editable.span = 1;
CKEDITOR.dtd.$editable.small = 1;
$("[data-allowed-formating='all']").ckeditor();
http://jsfiddle.net/OzzieOrca/PCH9z/1/
This mostly works but if you double click the Header (to select everything) and start typing, it deletes the subheading and you can't get it back until you refresh the page
I tried using <div style="display: inline"> instead of the small and span but when CKEditor is instantiated, it changes the styling of the div and the subheader drops below the header.
I will try see if there is anything else I can do with CKEditor or see if I have any other HTML layout or styling ideas but any suggestions would be appreciated.
(I had the same issue with TinyMCE so I tried CKEditor and I think I like it better so I decided to keep using it but I still have this same problem)
Edit:
I finally tried this:
<div class="page-header">
<h1 class="pull-left">Header</h1>
<h1 class="pull-left">
<small class="padding-left">Subheader</small>
</h1>
<div class="clearfix"></div>
</div>
but then realized that this wouldn't wrap the subheader but just moves it to a new line if it is too long. I submitted this bug report: http://www.tinymce.com/develop/bugtracker_view.php?id=6354 which includes this example of what I want to do and what is not working http://jsfiddle.net/OzzieOrca/jKmZ7/
First, make sure the editor doesn't attach itself to the <h1> element.
If that works correctly, then I suggest to wrap the elements that you want to edit in a block element during edit and restore the DOM when editing stops.
I don't know why CKEeditor might distinguish between inline and block elements but it's quite possible that it never occurred to the author that someone might want to edit only part of a block.
I had a very hard time trying to word what I wish to know how to do, nor could I locate any post or website from Google that had my answer probably due to not being able to word this correctly, but I will explain in fullest detail.
<br />
<hr />
<br />
Break, horizontal, break is my way of separating parts of the post from another. How can I group the three into one simple tag that can replace the three, thus saving me time and hassle .
It would be also helpful to know if there are ways to define tag groupings with more than just empty tags like a tag identified by the string title1 would be a tag containing all the format, text, and all sub-elements of the template that was coded somewhere else.
If this question has already been posted then I am sorry. Thanks!
You don't need the <br> tags because <hr> is a block level element and automatically creates a line break. If you're doing that to get some vertical space above and below thw <hr> why not just use CSS to give the <hr> some margin?
hr
{
margin-bottom: 20px;
margin-top: 20px;
}
Neither <br> nor the proposed alternative <hr> are particularly well-suited here.
You need to learn about CSS. All you need to do is apply appropriate styles (i.e. a margin) to the elements that wrap your posts.
<div class="post">
<h1>Post #1</h1>
<p>something</p>
</div>
<div class="post">
<h1>Post #2</h1>
<p>something else</p>
</div>
div.post {
margin-bottom: 3em;
}
If you are using HTML5 then use <article> instead of <div class="post"> to denote individual posts.
As for grouping tags, this is currently not possible in plain HTML, you need to apply some preprocessing for that. The usual solution is to use a content management system which creates the final HTML based on your content and an HTML template.
Whilst this specific problem can be solved with a little bit of CSS, it sounds like you need a layout or templating engine of some sort in the long run. I'm a rubyist by trade so my go-to solution for doing this is Jekyll.
What Jekyll does is generate static html files from layouts and content that you write. You can abstract a lot of the repetitive layout markup into separate files and then just reference them when you need them.
The following guide is a good place to get started: http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/
If you're already working with another framework then do some reading around it first to see if there's something there you can use. If you're just writing straight-up HTML/CSS though, then definitely give Jekyll a try.