I have changed the font size on my Kendo grid to 11 and by doing so, the calendar icon on a datepicker textbox gets cut off at the bottom. I was able to move the icon up using margin-top when you hover over it with the following code, however I am not able to figure out how to get it moved up in just its normal state.
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar{
background-position:-48px -176px; margin-top: -6px;
}
See example: http://jsbin.com/ufimom/592/edit
Try this,
.k-i-calendar {
background-position: -32px -176px;
margin-top: -6px !important;
}
Demo : http://jsbin.com/ufimom/596/edit
I have a highly personalized Kendo stuff. Custom styling is one of the biggest problems of kendo (along with million other issues that you will find once you start using kendo at a big scale). To minimize the size of the stylesheets they have combined a lot of styling of different controls into few files. Although its a good thing but it makes the custom styling (and then updating in the future) a nightmare. Knowing how ":not", ">", ":first", ":first-of-type", etc. work in css will really help you with styling of the grids and other controls.
I usually write separate stylesheets to override kendo styling (by using a lot of !important keyword in my override css). It helps when I update kendo.
Without seeing your html and background image in context, I'm just taking a guess here. Try appending the normal state of the calender icon to your css rule like this,
.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar, .k-i-calendar { background-position:-48px -176px; margin-top: -6px; }
DEMO
EDIT: As the previous poster mentioned, !important is likely the best solution here, in order to override the Kendo settings. Example:
.k-i-calendar {
margin-top: 0px !important;
}
DEMO here: http://jsbin.com/ufimom/598/
Related
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I have installed bbPress in my website and my theme override some bbPress css which I do not want.
The forum breadcrumb is hidden with the following code:
div.bbp-breadcrumb, div.bbp-topic-tags {
font-size: 12px;
}
bbpress.css?ver….5.14-6684:404
div.bbp-breadcrumb {
float: left;
}
vlog-bbpress.css?ver=1.8.1:335
.bbp-breadcrumb {
display: none !important;
As you can see in the picture the CSS comes from two different files:
bbpress.css
vlog-bbpress.css
Somehow the rendering seems to override bbpress.css.
What code should I use to make the breadcrumb visible?
Having installed a plugin (Simple Custom CSS) to write custom css, what should I write there in order to have the forum breadcrumb visible?
Please look at the real website here http://italiancrypto.it/forums/
The breadcrumb is hidden by:
.bbp-breadcrumb {
display: none !important;
}
What you see is that it is addressed by one class, and an !important. One class isn't a problem, but !important is (and is generally viewed as bad practice).
The easiest way to overcome this, is by addressing the same bbp-breadcrumb with an extra class, that's above it. For example:
.entry-content .bbp-breadcrumb {
display: block !important;
}
You could also use the above ID of bbpress-forum, but that is generally viewed as bad practice as well. Then again, desperate times call for desperate measures ;-)
Try add an id to the class .bbp-breadcrumb with JS
document.querySelector('div.bbp-breadcrumb').id = 'breadcrumb';
this will add the id to the element, then in your css use
#breadcrumb {display:block !important;}
since the id takes precedence over class I think this should work.
Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com
I have a problem in viewing my web app in mozilla.
In my web app I have a button whose css styles are as below:
.page_button
{
BACKGROUND-IMAGE: url(../images/pagebutton_bg2.png);
BORDER-LEFT:0px;
/*WIDTH: 100%;*/
CURSOR: pointer;
/*COLOR: #000000;*/
BORDER-BOTTOM:0px;
}
As above I have commented out the "Width:100%"&"Color:#000000" attributes as they are causing problems in Mozilla Firefox.(The width100% option makes my buttons appear very small) -- so i commented them.
But the problem here is that this button is inheriting the same Color:#000000 & Width:100% from other parent elements.How can I stop this inheritance.
I even tried overriding those properties like : Color : null; Width : none ---> But this is not working.
I appreciate any suggestions to overcome this.
Regards,
Vijay
I don't know if I understand your problem correctly but if you want to prevent accidental inheritance you can try and use full paths...so instead of just .page_button you could use something like body.page_button though it is more probable that you should do that somewhere else in your code and not in the part you are displaying hope that helps...good luck!
width is not an inheritable property, so you must be applying the style width: 100% to your button using another selector.
If you don't already have Firebug, then I recommend installing it and using it. With Firebug, you can select any DOM element and trace back exactly how the values of all CSS properties on the element were calculated.
If the button is on a link element, then width will have no effect unless the link is set to display:block; or display:inline-block; . That could be having an unintended effect.
I also second the Firebug recommendation!