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).
Related
https://app.codility.com/demo/take-sample-test/
I need help in disabling the blinking cursor. What is the custom CSS I should use? I am looking at Chrome -> Inspect I see something like .ace_animate-blinking. If I uncheck that it seems to work, but how to encode that in CSS style sheet?
I am using a chrome extension 'stylebot' to insert custom CSS
you can use
.ace_cursor {
animation: none!important
}
I am using react-datepicker.
I have two datepicker in the one line, and it is working perfect on desktop screen but when using it on mobile screen, calendar is cutting from right side as it did not got enough space from right side.
Further, It is also not showing scrollbar to scroll to right side.
Below is the image how it looks on mobile.
I just came across this issue
On smaller viewports, the calendar is cutoff by the window. (overflows off screen to right or the left)
In order to solve this issue, I had to use the popperModifiers prop
More specifically, popperModifiers.preventOverflow
<DatePicker
...
popperModifiers={{
preventOverflow: {
enabled: true,
},
}}
</DatePicker>
Checkout the popperModifiers Docs Here
After doing a little research into the repository, it appears this is a known issue. One suggestion is to use the portal version of the date picker, which puts the date picker in a modal. You could preserve the current behavior for larger screens and use the portal solution for mobile only.
I fixed this by using the following code:
.react-datepicker{
position:absolute !important;
right: -290px !important;
}
This fixes the problem for all screen sizes
You won't see the .react-datepicker class in your css. This is built into the npm package.
You will have to play with the right: -290px figure to get the right figure that works for your code.
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'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.