I have used below template to generate HTML, Now the problem is when I resize the window then text in the span not showing correctly, In given screenshot "aborted" word is broken down in two lines which not what I expected. How do I fix this issue?
template: _.template([
'<div class="notes">',
'<label class="control-label"><%=label%>:</label>',
'<span><%=text%></span></div>'
].join("\n"))
CSS:
.notes {
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
display: block;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
font-size: 12px;
line-height: 1.42857;
margin: 0 0 10px;
overflow: auto;
padding: 5px 10px;
word-break: break-all;
word-wrap: break-word;
}
div.notes label.control-label {
min-width: 0px;
}
Below is Screenshot from my HTML page.
It looks like you have white-space set to pre-wrap. You need to check if the whole code is injected inside <pre> or you need to reset the white-space property by:
span {white-space: normal;}
Related
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?
I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.
If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".
Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.
1. Using Scoped Stylesheets
In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).
Your HTML code would look like this:
<div class="my-container">
<style scoped>
#import "ckeditor/contents.css";
</style>
<!-- Your HTML goes here -->
</div>
2. Scoping each rule inside contents.css
In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:
.my-container
{
/* Font */
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 12px;
/* Text color */
color: #333;
/* Remove the background color to make it transparent */
background-color: #fff;
margin: 20px;
}
.my-container .cke_editable
{
font-size: 13px;
line-height: 1.6em;
}
.my-container blockquote
{
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 2px 0;
border-style: solid;
border-color: #ccc;
border-width: 0;
}
.my-container .cke_contents_ltr blockquote
{
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}
.my-container .cke_contents_rtl blockquote
{
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
.my-container a
{
color: #0782C1;
}
.my-container ol,.my-container ul,.my-container dl
{
/* IE7: reset rtl list margin. (#7334) */
*margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
padding: 0 40px;
}
.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
font-weight: normal;
line-height: 1.2em;
}
.my-container hr
{
border: 0px;
border-top: 1px solid #ccc;
}
.my-container img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
.my-container img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
.my-container pre
{
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE7 */
}
.my-container .marker
{
background-color: Yellow;
}
.my-container span[lang]
{
font-style: italic;
}
.my-container figure
{
text-align: center;
border: solid 1px #ccc;
border-radius: 2px;
background: rgba(0,0,0,0.05);
padding: 10px;
margin: 10px 20px;
display: block; /* For IE8 */
}
.my-container figure figcaption
{
text-align: center;
display: block; /* For IE8 */
}
I have what I think is some pretty basic css, and it behaves differently in FF4 and IE8.
The CSS in question is like this:
div.showme {
border: 1px dotted blue;
position: absolute;
top :10px;
bottom :10px;
left: 1%;
right: 33%;
overflow: auto;
padding: 0.8em 1em 0.8em 1em;
line-height:1.75em;
}
div.showme a {
padding: 0em 5px 0em 5px;
margin: 0;
white-space: nowrap;
color: #FF00FF;
background-color:#E6E6FA;
border: 1px solid grey;
padding: 0em 4px 0em 4px; }
div.showme a:link { color: blue; }
div.showme a:visited { color: #1E90FF; }
div.showme a:active { color: red; }
The relevant HTML looks like this:
<div class='showme'>
<a href='one'>one</a>
<a href='two'>two</a>
...
</div>
The problem is, the padding is not consistently displayed, in IE8.
In Firefox, it works as I would expect.
working example:
http://jsbin.com/ogosa4
Using the above working demonstration, if you resize the window you will see the padding on the "leading" element on each line within the div, change from zero to non-zero.
How can I fix this?
If you add display: inline-block; to your div.showme a {} the padding will be applied in IE also, but it has some impact with the line height and you may need to specify additional margin's
I have seen this behaviour in Opera too. The padding goes to the upper line. Try display: inline-block and white-space:nowrap if you have more than one word in the link...
You can safely use inline-block in IE7 with inline tags.
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)