I'm very new to Aloha (WYSIWYG) Editor and i would like to know how to remove/disable its blue outline then the editing field is on focus.
I've managed to disable the yellow highlight outlines, but couldn't find a way to disable the blue on focus border outline.
Any friendly advice?
Thanks.
This blue outline is made by the "highlighteditables" plugin's CSS src/plugins/common/highlighteditables/css/highlighteditables.css:
.aloha-editable-active, .aloha-editable-active[contenteditable=true]:focus {
outline: #80B5F2 solid 5px !important;
}
Check that when running the inspector in the web browser, selecting the element and disabling this style helps.
Note the ugly programming style with !important :(
Unfortunately, as you can can choose plugins to load you only choose JavaScript, CSS of all the plugins enabled during the build are merged into the aloha.css and are always loaded.
One way to fix it is to build the editor yourself. Basic introduction is described in section "4.3 Customized Builds" of Develop Aloha Editor guide.
As building Aloha yourself requires some effort, you may be interested in quick workaround using the inline style:
outline: none !important;
for the element you have problem with. Note the !important keyword - it is required.
Related
I'm a beginner of Wagtail, and trying to follow the tutorial to build a blog website.
The question I have is about RichTextField, inserting an image in the editor, and I have chosen the "Full Width" format, expecting the image should be centered (as said in the doc).
However it's not centered, as shown in the picture below.
What's wrong?
The docs don't say anything about the image being centred. On the contrary, the developer docs say:
The CSS classes added to images do not come with any accompanying stylesheets, or inline styles. e.g. the left class will do nothing, by default. The developer is expected to add these classes to their front end CSS files, to define exactly what they want left, right or full-width to mean.
So, to centre the image, you could define a CSS rule such as:
img.full-width {
display: block;
margin: auto;
}
When I try to add link to very left text in quill editor the popUp opened is hiding in the left side.And I am using Snow theme.
The below image shows my issue.
Not the most elegant solution, but you may need to override the css:
.ql-tooltip {
left: 0!important;
}
Sometimes quilljs doesn't play nice with theming libraries like certain versions of bootstrap (which was the issue in my case).
Currently, I am using a directive from a third-party library for a UI toggle button. I changed the background color and left/right positions of the toggle button a bit to meet my business specifications. E.g. the out-of-the-box style came as light green for true, light red for false; I changed this to a darker green for true, and a light grey for false. I also moved the toggle positionally a bit to the left. All of this works fine.
The one issue I'm experiencing is that for a split millisecond when the page with the toggle button renders, I see the old style quickly change from what came out-of-the-box, to my updated style. There aren't any other glitches in style after this fact, just the initial loading shows some quick shifting around on the element. This isn't a huge issue but I can't seem to pinpoint the issue or know why it is happening. Any thoughts? Something in an issue for CSS hierarchy perhaps?
Notes relevant to the issue:
I used the inspector to find the classes I needed to override, since the directive itself just uses an nz-toggle tag.
I am using !important to override. I've read that this is bad practice in itself but it is being used across the entire project and has been established as "our standard" of overriding styles
Here's an example of one rule from my CSS file compared to what comes out of the box:
.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}
vs.
.nz-toggle-wrap.true {background-color: #60bd68;}
Any thoughts?
This happens because your "new" CSS loads after the "old" CSS.
Of course that should be true anyway, because you want to override the old style, but it seems that the old and new code are too far away from each other hence you manage to see it change.
To solve this you have to move the new style "closer" to the old style.
The way to do it depends on your project architecture and your build process.
Another option is that the class "true" is added only after page load, and so only then your new style kicks in.
If you are loading this "third party library" locally, you might have to directly edit the CSS files of the plug-in.
With the plug-in you linked, maybe you need to edit this file directly to prevent the "flicker", which is caused by the styles loading in sequence:
https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl
I'm trying to set opacity for extjs (4.2.1) panel (whose id is myPanel) as Ext.get('myPanel').el.setOpacity(0.65). It works fine in firefox and chrome but not in IE 8. The ultimate goal is to make the panel transparent so that the user can see through it. Could any one please help me with this...
Ext will simply apply the CSS property "opacity" or alpha transparency to an HTML element. In IE8 this is almost in no case supported.
You could however use a plugin or hack to make IE 8 compatible with it.
Check http://css3pie.com/ or http://modernizr.com/ for example.
Also check http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/ for an example of your issue, and how it is solved using PIE
When you dont want to use 3rd party plugins, you can also try this:
Add the following rules to the CSS of your property
/* IE8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */ filter: alpha(opacity=50);
You can also do this with Ext.js using Ext.get('myPanel').el.setStyle()
e.g.
Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');
Finally..after breaking my head for as while..I came up with 2 solutions...
1) Apply x-panel-ghost (which is an extjs in build css applied during the drag process) for baseCls or componentCls gave the transparency. But all the other default css for a extjs panel are lost and so we have to manually write them up..
2) The best solution would be to set an image which is made transparent (through photoshop or something) as a background image for the panel header and body and apply it to the cls config of the panel as below:
In panel:
cls: 'transparency',
In css file:
.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}
And in the same way, for the body as well..
Hope this helps someone...
I have some button controls with CSS line-height: 18px. Some are input controls type="button", and others are anchors stylized to appear as buttons like the input controls. In FF3.6.12/IE8 they are displaying the same height, but in IE7, the anchors are shorter in height. How do I get them to display correctly in IE7?
I took your demo: http://jsfiddle.net/DnGvF/
and added just this CSS at the end: http://jsfiddle.net/gRF9g/
/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
overflow: visible;
*height: 24px;
*line-height: 15px
}
Some explanation of what's going on there:
There's a known bug in IE7 that overflow: visible fixes, related to the width of the button. Try looking at my demo in IE7 with and without it.
I'm using the Star property hack to provide change the height and line-height for only IE7 and lower. You can tweak the numbers I picked if you need to.
That hack is invalid CSS, but there's no problem using it. It's never going to come back and bite you - it's a "safe hack". Nevertheless, if you require 100% valid CSS, there are alternatives.
It now looks consistent between IE7 and the later versions.
Yes, this is a little kludgy, but at least it's all together in the CSS in one place, with a clear comment.
Honestly, if IE7 is the only problem, I'd just go with a hack and bump up the line-height:
*+html .button { line-height:24px }
If you use something like Modernizr, you could do away with the hack and use:
.ie7 .button { line-height:24px }
Of course, the other alternative is to actually track down why IE7 is behaving the way it is, and rewrite your CSS accordingly, but without any posted code, I can't help you with that.
EDIT: Forgot about this method of targeting just IE7:
<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->
Buttons in IEs have additional padding/borders/whatever - they do not style well as in other browsers.