How to remove Quill.js toolbar border? - javascript

Im using quilljs and would like to remove the border around the toolbar, i don't know how to select the right element but i have tried:
.ql-toolbar
border: none
shadow: none
outline: none

For people coming with similar questions about quilljs borders, you could remove it by looking at the element via devtools -F12 and setting border to zero . Similarly you can remove other borders and manipulate other properties, not just the border
for example to remove borders of full editor
.ql-container.ql-snow{ border: none !important;}
why? because thats the element popping out in the dom
Also I was inspired from comments answer which was given by
Farid Vatani for removing toolbar borders
ql-toolbar.ql-snow { border: none !important;}

Related

How to hide border flickity in Chrome

anyone please help, how to hide border flickity slider in chrome. The border just show in Browser Chrome only. may be like this :
or u can visit my blog : aqiqoh-syafaat.blogspot.co.id
thanks
To remove the outline from just flickity elements you can add the following css
.flickity-enabled:focus {
outline: none;
}
As others have said removing this globally is bad for accessibility. If you use the dots or nav features for flickity you would ideally add focus to these elements.
Can you please tell exactly where how you can see that border.
Generally this border appears as outline on focus(if), you can set
*:focus{
outline:none;
}
This will remove that blue border from everywhere.
or simply outline:none; on element or its pseudo class
(Use !important if needed.)

Expand hover area while keeping background color

I have a div that I want to expand the "hover area" of. (If your mouse is just outside of the element, the css :hover selector should still be in effect.)
I tried creating a transparent border: (border:10px solid transparent;) Unfortunately, my div has a background color, and the background "leaked" into the border area. (See fiddle for demonstration of the issue.)
I also tried using outline instead of border, but the outline doesn't seem to "count" as a part of the element when it comes to hovering. (It looks right, but won't detect the extra hover area.)
Is there any way to do this with plain CSS (preferably not many extra elements)? If not, is there a simple method using vanilla JS (no jQuery)?
$("#toggle").click(function(){
$("#attempt").toggleClass("border");
});
#attempt {
width:100px;
height:200px;
background:#aaa;
margin:50px;
}
#attempt.border {
margin:20px; /* Change margin to keep box in same place after border adds size */
border:30px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="attempt"></div>
<button id="toggle">Toggle Border</button>
<p>Border (in the ideal case) would not change the element's background. However, adding the 30px border (even when transparent), will cause the background to change size.</p>
All you need to prevent the background to leak is the box-sizing property. It's a very important one. Just add it to #attempt:
#attempt {
box-sizing: border-box;
}
Check out the updated fiddle here. You can learn more about box-sizing here.

How to apply CSS(specially padding/margin ) to options or optgroup of select drop down?

Padding or margin CSS only applies to the options in FF browser. I have tried same thing in IE chrome but does not work. Can someone let me know how we can style(padding/margin) option in select menu.
There is a DropKick JQuery library , where you can customize your dropdown (it's automatically replacing the native dropdowns with this element, so you don't need to replace your <select> elements in html code.
You won't see an option for padding or margin. That's because it isn't needed. What I typically do is I wrap the select dropdown in a div and style it like so.
.myDropdown select{
border: solid 1px red; font-weight: normal;width:300px;height:40px;font-size:12px;background:#FFC;
}
The reason padding is not available is because it really isn't needed. You can adjust the height or width of your box and the font size. Adjusting the height and width essentially adds more space around your text within the select. Anything more than adjusting these settings is just overkill. If you're really wanting that much control over styling then use something like jQuery UI or bootstrap.

Cufon: Underline Text

How can I underline a text replaced with Cufon?
text-decoration is not supported by Cufon:
https://github.com/sorccu/cufon/wiki/known-bugs-and-issues
Perhaps you could add a border-bottom property to the element using normal CSS?
Cufon adds a class to the elements it creates that you can style (useful if your containing element has pads/margins). So for a link, just use this:
a .cufon {border-bottom: solid 1px #000000}
a:hover .cufon {border-bottom: none}
To keep your elements from shifting up/down, either add a border to the non hover state, or adjust the heights of both elements accordingly...
Be aware though. Adding a border bottom to a cufon class is quite ugly.
I'd be best to avoid underlines to these fonts in your design. It might look nice in Photoshop, but don't show this to you customers. It doesn't work out that well in HTML/CSS.

What causes this mouse behavior?

What causes this to happen? (the mouse is not being moved or clicked)
I suspect that the :hover CSS style results in the object having a different size (possibly margin), which causes the :hover CSS style to cease to be applied. This returns the object to its original dimensions, and the :hover CSS style is applied by the browser once more.
The browser can only keep up with this at a certain rate and you see visible flickering.
It's an edge condition.
It is because you are adding a border on hover.
But because you hover near the top, when the border is added, your cursor goes outside of the element.
Would be best to add
border: 1px solid #FFFFFF;
border-bottom: 0px;
to begin with, in your CSS
At a guess, the rollover event is adding a border which changes the effective size of the element, so that the mouse is no longer over it, or something like that...

Categories

Resources