This question already has answers here:
How to set the height of CKEditor 5 (Classic Editor)
(28 answers)
Closed 4 years ago.
I was trying out ckeditor5 in Vue.js, and I came across a problem of not being able to set it's height manually, below is my code please let me know if I am doing anything wrong.
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
data() {
return {
editor: Editor,
editorData: '',
editorConfig: {
height: '500px'
}
}
Classic editor (CKEditor 5) no longer encapsulates the editing area in an , which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the height setting can be achieved with :
<style>
.ck-editor__editable {
min-height: 500px;
}
</style>
or
.ck-content { height:500px; }.
2020 Note: when working with single page Vue components, do not scope the CSS you want to add to ckeditor, as it's elements are rendered separately from Vue and no data attributes are added to them. In other words, don't do this, as it will not work:
<style scoped> /* don't add "scoped"; note that this will also globalize the CSS for all editors in your project */
.ck-editor__editable {
min-height: 5000px;
}
</style>
Related
One has a ConvertKit form, that was added using ConvertKit plugin, and uploaded on a widget as follows
After applying some styles, when I am logged in, the form looks like this
However, when I log out, there are some default styles being loaded and the form ends up looking like this
How does one remove ConvertKit default stylings?
There may be different ways of removing the default styles applied by ConvertKit. I have tried the following, but with no success:
Inspecting the form in the front-end, one sees that inside a form with the class "seva-form formkit-form", apart from two div, one has a style element., as follows
<form class="seva-form formkit-form">
<div class="formkit-background">...</div>
<div data-style="minimal">...</div>
<style>...</style>
As I have seen that removing the style block <div data-style="minimal">...</div> solves the issue with the form, tried, as per #m4n0's suggestion applying .formkit-form div[data=style="minimal"] { display: none; }, but it didn't solve the problem.
Based on your changing requirements that we discussed through comments:
form.formkit-form[data-uid="3624b8b144"] {
border: transparent;
margin: 0 auto; /* To center the form, you can also use flexbox centering */
}
/* I had to increase the specificity of the below selector because there are other selectors acting on it */
form.formkit-form div.formkit-powered-by-convertkit-container a.formkit-powered-by-convertkit {
display: none; /* To hide the copyright but check how their licensing works */
}
.formkit-guarantee a {
color: #fff; /* To change the color of privacy link */
}
Output:
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
i want to add a class to a div that has adjacent sibling selector.
What i am trying to do?
I have two divs which appear on top of each other. so was thinking to move one div (prev_div) slightly above div(next_div) so they are visible. when next_div is closed the prev_div should get back to its original position.
Below is the html code,
<div class="wrapper">
<div class="prev_div">previous</div>
<div class="next_div">next</div>
</div>
I want to add margin property to the div with class "prev_div". I tried doing that with css as below,
.wrapper div.prev_div + div.next_div {
position: relative;
bottom: 70px;
}
But the above adds the margin to the div with class next_div instead i wanted the position style for the prev_div.
So i tried doing the same using the javascript by finding the element with prev_div and next_div. if next_div present adding a class "additional" to the prev_div. once class additional added and if the next_div not present remove the additional class for prev_div. but this doesnt work...there is a delay in removing the class added when next_div not present.
this next_div can be closed with close button. and i am doing the node calculations in render method. the next_div is removed there is no trigger to render...it is taking time to detect it...can i do it in componentdidupdate or so.
could someone help me fix this. thanks.
I think since i am
render = () => {
const prev_div = document.querySelector('.wrapper div.prev_div');
const next_div = document.querySelector('.wrapper div.prev_div + div.next_div');
if (next_div) {
prev_div.classList.add('additional');
} else {
if (prev_div && prev_div.classList.contains('additional')) {
prev_div.classList.remove('additional');
}
}
}
Also the above doesnt work cause the next_div in the dom is from child component. so even if i put these calculations for node and clases in componentdidupdate...closing the next_div is not recognised soon. there is a delay in it.
thanks.
.wrapper .next_div {
margin-left: 10px;
}
If this is a react project it wouldn't work. You're using class instead of className in your html.
If I understand you correctly, you don't need to do all this stuff.
If next_div can be closed, just add margin-top: 10px to next_div, so when prev_div is "alone" -- you respect the proper styling
this is simplest css only solution
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a set of images that i want to place in a stair type way, like so:
img
img
img
img
I want the images to overlap and I'm currently using faux positioning.
You can see an example here:
http://jsfiddle.net/2PSFC/
I would like to add a margin-top and margin-left of 40px to every img after the first one. As you can see the :nth-child doesn't seem to be working, but anyways i would much prefer adding the margin with jquery. any ideas?
If you don't know the number of images, you can set the margins dynamically using jQuery:
$('.stuff').css('margin-top', function(i) { return i * 40; })
.css('margin-left', function(i) { return i * 40; });
Or
$('.stuff').each(function(i) {
$(this).css({ 'margin-top': i * 40, 'margin-left': i * 40 });
});
Here's a fiddle
If there aren't too many elements, I wouldn't suggest using jQuery. To fix your CSS do this:
.container:nth-child(2) .stuff { margin-left: 40px; margin-top: 40px; }
Since every element with the class .stuff is wrapped in a container div, it will be the first and only child, but the container divs have different child indexes.
jQuery solution: http://jsfiddle.net/WKE4n/
Including an answer for centering the stack of images in the parent element, which was asked as a comment on another answer:
$('.stuff')
.css('margin-top', function(i) { return i * 40; })
.css('margin-left', function(i) { return i * 40; });
$('.wrapper').css('left',($('.wrapper').parent().width() / 2) - ($('.stuff').length * 20) - ($('.stuff').width() / 2));
JSFiddle
I'm sure there's some way to clean up that second "line" of JS (the one that centers the stack of images), but I can't think of it for the life of me.
This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 5 years ago.
width: attr(data-width);
I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work.
HTML
<div data-width="600px"></div>
CSS
div { width: attr(data-width) }
There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation
This fiddle should work like what you need, but will not for now.
Unfortunately, it's still a draft, and isn't fully implemented on major browsers.
It does work for content on pseudo-elements, though.
You can create with javascript some css-rules, which you can later use in your styles: http://jsfiddle.net/ARTsinn/vKbda/
var addRule = (function (sheet) {
if(!sheet) return;
return function (selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
}
}(document.styleSheets[document.styleSheets.length - 1]));
var i = 101;
while (i--) {
addRule("[data-width='" + i + "%']", "width:" + i + "%");
}
This creates 100 pseudo-selectors like this:
[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }
Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.
As of today, you can read some values from HTML5 data attributes in CSS3 declarations. In CaioToOn's fiddle the CSS code can use the data properties for setting the content.
Unfortunately it is not working for the width and height (tested in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).
But there is a CSS3 attr() Polyfill from Fabrice Weinberg which provides support for data-width and data-height. You can find the GitHub repo to it here: cssattr.js.