I'm using CKEditor 5 in Angular 7, Classic build.
All working fine except that the p tags in the content edit area have this css applied:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Which results in a big vertical margin between paragraphs in the content edit area.
I've been going through the documentation but haven't found a clear answer as to how I can remove or override this css. In previous versions of CKEditor the css file was easily accessible and overridden, but in version 5 not so - it seems I may have to do a custom build, which I'm hoping to avoid.
Before I go down that route - has anyone else come across this? Any other solutions or recommendations?
Thanks in advance :)
You should use :host ::ng-deep to override it with css.
Example:
:host ::ng-deep .text {
p {
margin-bottom: 20px;
}
h2 {
margin-top: 40px;
margin-bottom: 10px;
}
h3 {
margin-top: 25px;
margin-bottom: 5px;
}
h4 {
margin-top: 20px;
margin-bottom: 5px;
}
}
<ckeditor class="text" [editor]="textEditor" [config]="config"></ckeditor>
I'm using CKEditor 4 and I don't know if the source tab is still available in that version. If so, you have to edit ypur ck.config file and add CKEDITOR.config.allowedContent = true. After that, you can now paste a style in the source tab
Related
I am using this excellent package: https://github.com/barryvdh/laravel-dompdf
To download a view to a customers computer.
$pdf = PDF::loadView('doc_generation.mot', ['car' => $car]);
return $pdf->download($vrm .' MS.pdf');
Everything works fine, but no html entities are being shown on the pdf. Have tried the tick itself, and ✔ but both don't show.
I also have a div:
.number-plate {
background: #FFD307;
padding: 16px;
border: 1px solid #999;
font-size: 36px;
font-weight: 700;
border-radius: 5px;
}
Where the padding isn't shown on the output PDF. Although padding used elsewhere on other selectors is fine.
Anyone know how to fix these issues?
I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an #include clearfix; which now includes an overflow:hidden property.
For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:
.container { //Container for the grid system
background: $background-color;
max-width: $site-width;
margin: 0 auto;
position: relative;
#include clearfix;
#include breakpoint($large-break) {
border-left: 20px solid #fff;
border-right: 20px solid #fff;
width: $site-width;
}
.container {
border: 0px;
margin: 0px;
clear: both;
}
}
.left-arrow, .right-arrow {
position: absolute;
cursor: pointer;
margin-top: -20px;
font-size: 0.8em;
width: 41px;
height: 41px;
top: 50%;
}
.left-arrow {
left: -10px;
background: url(/images/icons.png) no-repeat -153px -146px;
}
.right-arrow {
right: -10px;
background: url(/images/icons.png) no-repeat -197px -146px;
}
Here's a screenshot of the problem:
https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0
Should I be using something other then the clearfix mixin in my container?
Edit: - Added Sassmeister issue as requested
This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:
#mixin clearfix {
&:after {
content: '';
display: table;
}
}
see: http://sassmeister.com/gist/099ef72b56365fe8ce07
Singularity doesn't have its own clearfix mixin.
You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.
The solution is to use another mixin for clearfixing.
Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:
.foo {
*zoom: 1;
}
.foo:after {
content: "";
display: table;
clear: both;
}
I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.
It has the following benefits over the pie-clearfix:
Shorter output that works for all modern browsers:
.foo:after {
content: "";
display: table;
clear: both;
}
Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.
To configure Toolkit for using the extend way apply this in the beginning of your CSS:
#include toolkit-set('clearfix extend', false);
To override current setting once use this:
#include clearfix(true);
true means the extend methhod, false means the mixin method.
Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.
If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.
I am using Joomla Membership Pro component and am having some trouble with CSS styling.
If you click here
http://se24media.net/dc3/index.php/join-us/membership-options/supporter/sign-up
You will see the background is styled nicely but if you fill in the form, click submit and go through to the page which dispalys your membership details it loses all styling (see link below)
http://i60.tinypic.com/33pa4c2.png
Does anyone know why it suddenly loses it's formatting?
Many thanks
It loses the styling because on the first page, the table containing all the fields is wrapped with <form> tags like so:
<form id="os_form">
<!-- Table with fields are in here -->
</form>
and the following CSS has been given for #os_form
#os_form {
background-color: #FFFFFF;
background-image: url("/dc3/images/news_header.gif");
background-repeat: repeat-x;
border-color: #868687;
border-radius: 12px;
border-style: solid;
border-width: 0 2px 3px 0;
color: #000000;
float: left;
font-family: 'Source Code Pro',sans-serif;
height: auto;
margin: 0 40px 40px 50px;
max-width: 100%;
opacity: 0.9;
padding: 40px 20px 20px;
width: 85%;
}
The second page simply displays a table with the class os_table so style this table, you will need to add the following to your CSS file:
.os_table {
/* code here */
}
Hope this helps
I have this list (see attached) appearing below the search box on my Magento site - url http://www.performplay.co.uk , I have checked the db for these search terms but they are not in the db. I have re-indexed and cleared the cache but they still appear - I have done this from the back-end - not using the script indexer.php.
Not sure what is causing this list top appear seems to be in Chrome not IE ..?
Any ideas
Thanks
Your styles.css (skin/frontend/default/perform-play/css/styles.css) is not complete. Insert something like:
#search_autocomplete ul {
background: #ffffff;
position: absolute;
}
#search_autocomplete ul .amount {
color: #00FF00;
float: right;
font-size: 12px;
line-height: 30px;
padding: 9px 0 0 9px;
}
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.