[Highcharts]
Hello, is there a way to display the tooltip outside the tags? Like to make it "float" outside the container so that it doesn't get cutoff like below.
Thanks in advance.
Here's an example jsFiddle you can use to reproduce the issue. (Try hovering over the boxplot)
http://jsfiddle.net/af3g18mo/ Code
In your fiddle i can figure out the Problem:
If you go up one cascade in your stylesheet you can see that your paths and stuff is within a tag.
The tag has the fix height of 65px and no overflow attributes - but one path before there is the overflow:hidden. This is why the highchart tooltips and everything is just cut off.
You can change your height dynamically to for example 40% what doesn't really fix the problem if you have longer contents in your tooltip. but you can give a "overflow:visible;" to your <svg> and overwrite the "overflow:hidden" in your ".highcharts-container" with visible - so all the contents like your tooltips that have more than 65 px height are displayed.
You can see the solution here:
be careful changing these things, but in your example i couldn't see any bad reactions to this change. In case you have to give your css the whole path to not change it globally.
http://jsfiddle.net/af3g18mo/2/
So the concrete fixing for your css could be:
svg{
overflow:visible;
}
.highcharts-container{
overflow:visible !important;
}
Related
Attempting to have three backgrounds with various z indices is resulting in only one layer being shown.
This jsfiddle has the relevant code and examples (minus the huge foundation css file... the behaviour is unaltered without it).
the classes that are failing are
skyline
and
#footer_container
whereas #header_container is running properly.
I've updated your fiddle here.
#footer-container wasn't displaying its background image because of your CSS syntax. Since you combined both the background image URL and no-repeat, you would need to use the background shorthand rather than the background-image property.
A great way to check this sort of thing is to inspect your element with your browser (in Chrome: Right Click > Inspect Element) and find the element that isn't displaying properly. You'd notice that the background image property of your #footer-container div was being literally crossed out by Chrome because of a syntax error.
There was also a bit of a syntax problem in your .skyline class. First, both your body and the inner div have a class of .skyline. This is kind of confusing so you should remove it or be more specific in your CSS, e.g. with p.skyline, div.skyline, etc. As you've got it currently written, both your body and that .skyline div will get the background image. You also didn't include a closing </body> tag. I'm assuming you don't want the background image on both that div and the body, so I removed your body tag in the updated fiddle.
Also, in your .skyline css, you have both height: 546 and height: auto. First of all, height in CSS should have a specific value (e.g. px, em, %). For an <img src="img.jpg" height="546" />, however, simply putting "546" as its height would be fine. Second, you should only have one height value per class.
The skyline problem itself is that you didn't close your curly bracket on line 126, so no styling at all was applied to .skyline. Once it's closed, there's still a problem. It has no width. So let's set it to 100%. Still nada. This is because .skyline's parent div#container also is widthless. So let's toss a 100% width at it too. Then we're in business.
A good text editor that highlights syntax errors could help you out a bunch, especially when you're just starting out.
Hey guys I am having a small issue with an assignment. I have to create this page and it looks great in Chrome but every div cell renders one pixel smaller in Firefox, I believe it has something to do with border width. Is there a work around or something I am doing wrong?
I am using a CSS reset, and I have declared my doc type.
Should I have just built this page using tables instead? Sorry no link to published code, also when I place the code in the code block it still displays the HTML.
https://docs.google.com/file/d/0B8uifJLGRXapcHF1VzRNNGo1b2M/edit?pli=1
Thanks in advance.
Try using CSS outline that will also work. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
However, the outline property is different from the border property.
The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.
ie.
.example {outline: 1px solid pink;}
Try using the box-sizing property in CSS to fix this problem. box-sizing:border-box; will render the border and padding inside the actual width and height of the element. For a better description check this http://css-tricks.com/box-sizing/
The input text ("ooooooo's") you can see is continuing across the complete page and under the images. I would like it to stop inside the the area shaded red. How would I resolve this?
You can give any element a fixed width using the CSS width attribute. This will work whether you're allowing input text or just displaying text.
Examples:
div{
width:400px;
background-image:url("yourimage.png");
}
textarea{
width:400px;
background-image:url("yourimage.png");
}
Your text should be inside that element. If you're having problems with long words (like your example with the ooooooooo) you can set word-wrap: break-word
Try setting overflow: hidden in your CSS. Take a look here for more info.
Use a textarea for this element. It's built-in behavior is what you are looking for. You can style it with CSS to fit your layout.
I also suggest you get the Firebug plug-in for Firefox. When you see something you like on the web, it will allow you to right-click and see the html, JavaScript, css, etc., (anything client-side) in a box at the bottom of your browser. You can even edit the code and see the results of your experiments in real time. It is invaluable for those "just like so-and-so does it" situations.
I'm trying to do something pretty simple: an <a> tag with a background image. The code is found here, http://jsfiddle.net/QWatA/
The problem is that for some reason I can't set the width of the <a> tag in this code. If I had just a normal background and set it with a width it works fine. However seems like if I do it this way I have no control over the width. Ideally I want all the links to have highlights of the same width.
The reason I'm doing this is that I want a different background image for each of the links, so I'm forced to define all those a.class1, a.class2 stuff.
Thanks!!
Add display:inline-block; to your 'a' elements. By default 'a' is display:inline and so does not establish box with width/height.
http://jsfiddle.net/QWatA/1/
yea c-smile beat me to it just put display: block in your css, however if your going to do a.class1, a.class2 and so on with new pictures put it in your ul li a instead of in the a.class1 a.class2 and so on then you only have to write the code once.
I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )
How do i removed the background of links when it has an img as a child? I though that someting like this would work:
.featured_tutorial img < a
CSS does not support a parent selector.
You have to use classes like a.this_link_contanis_img{ /*override background*/ }
Or maybe you could set a new property to the img. This could hide the link's background.
.featured_tutorial img{ /*override background*/ }
Edit: Ok, that wont work in your case..
Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.
It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:
a img { display: block; }
or if you want the to stay displayed as inline
a img { vertical-align: bottom }
this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.
Hope it helps,
T.
As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it
http://jsfiddle.net/vrqCV/
jQuery(document).ready(function() {
jQuery("a:not(:has(img))").addClass("bg");
});
As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)
But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.