I have this annoying blue border around the Kendo Tabstrip whenever it is selected.
Possibly something to do with aria?
Does anyone know how to remove it?
The kendo css includes a box shadow when the tabstrip has focus. You can override it by adding the following css:
.k-tabstrip:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
Related
I need help writing a menu for my p5.js game I am working on. I haven't used p5.js before, and the jam I am working on ends in 2 days. If possible, I would like it as a rectangle rather than a stock button so it looks better.
Thanks in advance!
Edit: I have quit the jam, because I don't know anything much about p5.js.
I will still work on it though
Well you could use buttons for the menu and to have that flat color button you could use CSS.
sketch.js
function setup(){
button1 = createButton("something");
button1.class('button');
}
style.css
.button {
background-color: rgb(0, 168, 219);
color: white;
padding: 15px 32px;
text-decoration: none;
border: none;
}
I want to close CKEditor if I click outside its window.
Stopping propagation on a div enclosing the textarea being replaced by ckeditor, like so
$('#resumo_div').click(function (event) {
event.stopPropagation();
});
and then detecting the click this seems to mostly work.
The exception are clicks on ckeditor widgets like the Link widget which are being detected as being outside. Is there a standard way to doing this?
Your problem is that the event handler is going to start with the widgets as they are the top-most elements that were clicked. By the time the event gets to your encompassing div, the widget will have been enacted. Instead of enclosing the ckeditor in a div (overlay for my example that when clicked will close the ckeditor). Move the ckeditor outside of the div (overlay).
<div class="overlay"></div>
<div id="ckeditor-container"></div>
<style>
.overlay {
position: fixed;
width: 100%;
height: 100%;
}
#ckeditor-container {
position: fixed;
top: 50%;
height: 200px;
margin: -100px auto 0 auto; /* center the container */
}
</style>
After discovering How to hide ckeditor when we click outside of the editor? I was able to improve the solution posted there that satisfied my needs by intercepting clicks in widgets
$('body').click(function(event){
if($(event.target).parents('#articleEditor').length <= 0 && $(event.target).parents('.cke_dialog').length <= 0)
$('#articleEditor').hide();
})
I use the Kendo UI grid in my project to present my data.
I have a trouble about the its row height. When the grid is initialized; the row seems very odd. I tried to give some informations about the grid's back. The console screen contains some informations about the grid's initialization. You can glance through the enclosed picture.
.k-grid tr td {
border-style: solid;
border-width: 0px 0 1px 1px;
border-color: #c5c5c5;
}
I have a header strip with a shadow effect and contains navigation links; when you hover over them, a sub-menu appears.
See test page here
How can I make the sub-menu appear on a layer BEHIND the header strip? I need the header's box shadow to cast on top of the sub-menu.
Currently the sub-menu ( .main-navigation li ul ) has a z-index lower than the header strip ( .site-header ) but this is having no effect. I've tried giving it a negative z-index but this puts it behind the content (therefore hidden) and the links no longer work - I've read this is a common problem so I'd like to avoid using a negative z-index.
Hope you can help.
Z-index might not be the solution in this case, due to the stacking context of elements. Without re-ordering your html, you might try this trick using box-shadow on a pseudo-element attached to your sub-menu. For example:
.main-navigation li ul { display: none; position: absolute; top: 100%; margin: 0; overflow: hidden; }
.main-navigation li ul:before { content: ""; display: block; width: 160%; height: 10px; margin-left: -30%; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); }
Check this DEMO. Note that this is only one possible solution, as there are likely other ways to achieve the same effect.
The text content should already naturally appear behind the shadow of the header since it is an adjacent sibling element, ordered after the header in the html. (I added a background image to the content div in the demo to show this.)
Is there a good cross-browser way to set a max-height property of a DIV and when that DIV goes beyond the max-height, it turns into an overflow with scrollbars?
Sadly IE6 doesn't so you have to use an expression for IE6, then set the max-height for all other browsers:
div{
_height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
overflow:scroll;
}
Overflow:auto would most likely work in most cases for have any extra spill over.
I found this solution from a post made in 2005 (Min-Height Fast hack). It's a hack but it's simple and pure CSS:
selector {
max-height:500px;
height:auto !important;
height:500px;
}
The example is for max-height, but it works for min-height, min-width and max-width. :)
*Note: You must use absolute values, percentages don't work.
All you need now is the "overflow:scroll;" to make this work with scroll bars
selector
{
max-height:900px;
_height:expression(this.scrollHeight>899?"900px":"auto");
overflow:auto;
overflow-x:hidden;
}
Could you have a wrapper div with the height set as your height and overflow: scrolling. Then the inner div has no height set and as it grows it will fill then use the scrollbars of the first div?
Major hack (RedWolves-style):
.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}
I was getting no love from the max-height attribute so I had this alreadyand succeeded with these 2 classes. But it's ugly so in searching for better hit this question. divMax having position:absolute lets content underneath show through but controls the ultimate height of divInner to 200px.
I found this from http://www.tutorialspoint.com/css/css_scrollbars.htm and modified a bit. It seems working for both IE9 and FF19
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
max-height:100px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height: 100px !important;
max-height:110px;
overflow:hidden;
overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>