How can I change my tool-tip so that it has a working auto width. I think the problem is at the relative position of the link.
See here my problem http://jsfiddle.net/kzJRW/
How can I fix this and the tooltip works still as I defined.
Thanks for your help!
http://jsfiddle.net/kzJRW/13/
The white-space property helps not break words. I also rearranged some of your declarations, non-changing values such as layout positioning and box-shadow colors don't need to be declared in the :hover pseudo-class.
#shub; you need to just write white-space:nowrap;
like this:
.tooltip span {
margin-left: -999em;
position: absolute;
white-space:nowrap;
}
example http://jsfiddle.net/sandeep/kzJRW/14/
in a tag along with position:relative give display:block
Check this:
http://jsfiddle.net/kzJRW/9/
Related
This is for terms&condition kind of page where there is checkbox next to the term. I dont know how to change the checkbox shape and it still stuck as a blue square. Please help, thank you
I would update the style by applying a classname to the Checkbox and changing the CSS.
Something like:
// style.css
.ant-checkbox.foo span.ant-checkbox-inner {
background-color: hotpink;
border-radius: 50%;
}
// jsx
<Checkbox className="foo" />
i have problem with my page, when it reaches to 768X1024 a big space below my footer exist, i looked some answers here at stackoverflow but i can't find one. can you help to fix it?
here's my http://jsfiddle.net/craybac/pb0d6zda/5/
and here's the image problem:
![enter image description here][1]
Use position absolute instead of position relative
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
Use postion:absolute,solve your problem.
here is
fiddle link:
Still your problem is not solved.use the below css
html,
body{
height:100%;
}
use some id wrapper after body and close that tag in before closing body tag.
and add the below css.
#wrapper {
min-height:100%;
position:relative
}
When putting multiple charts tooltips from upper charts are hidden behind others.
I found some tips on how to it but nothing helped.
Is there anyway to keep tooltips on top of charts?
The example is here: http://jsfiddle.net/Zw3uM/
Thanks a lot!
This is pure html : Any div element loaded after ( meaning appearing after on the html page) will always be in front.
In order to get the first chart tooltip be in front of the second : load the second in first and set its y position on the page using an absolute or relative position in css :
I've change their order, putting the container2 in first in html:
<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>
Then set the position of container2 to be under the first one (thanks to the top style attribute) :
div[id="container2"] {
position:absolute;
top:200px;
}
Here is the result : http://jsfiddle.net/Zw3uM/3/
You can use tooltip pisitioner:
http://api.highcharts.com/highcharts#tooltip.positioner
The problem is due to each highchart container having its own stacking context. This is because the highcharts-container has both position: relative and z-index: 0 (css dynamically applied by the highcharts library).
So the z-index of the tooltip has meaning only in its parent highchart container.
To fix this we need to override the (z-index: 0) rule for the highcharts-container using the following:
.highcharts-container
{
z-index: auto !important;
...
}
This way all hightcharts-containers & their children would share the same stacking context and their z-indices would apply the desired effect.
You can check the fix here: http://jsfiddle.net/w5bLo1cw/4/
is there a way to alter a background when you rollover a link? im making a degree show website and want a large sample image to appear in the background when you rollover the link of persons name. i have an image appearing, however its covering all the text and in a fixed position over the link. is there a way to do this so it just alters the background image and stays behind all the other text on the page?
heres what im working with
#hover_img img
{
display:none;
}
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
}
html
<div id="hover_img">LINK<img src="image" alt="" /></a></div>
thanks!
** fiddle http://jsfiddle.net/5yhsL/ **
Add z-index: -1 to the image on hover:
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
z-index: -1;
}
You can accomplish this by putting the text inside another element adjacent to your image element. Absolutely positioned elements will take dominance over their neighbors, and one way you can get around that is by assigning a value to the position property for subsequent elements.
Here is a jsfiddle I've whipped up:
http://jsfiddle.net/93mpW/3/
I am using jQuery-ui slider for the first time and am confused by a rather basic issue. When setting my slider, I wish to do so without using a theme. When I slide from left to right, the right hand position of the slider handle steps 1 handle width past the slider. This is due to the slider css positioning the handle with left: 100%. I note many many other people using the slider without any difficulty, but can't see how they are getting round this issue.
Demo of issue
I assume I am missing something embarrassingly basic and would love to know what.
many thanks
Having read a bit more into this, it seems that the slider is designed to act in the way described, but with the handle offset to the left by 50% of its width. Thus the centre of the bar denotes to value - which makes total sense (when the slider denotes a value).
To use the slider as a scrollbar simply wrap the slider in a div which is padded left and right with 50% of the slider's width. I've updated my demo to reflect this.
If anyone has a better solution, without needing the extra div, I would like to see it.
I checked your demo. You are missing some css files. DID you also download the css files from jquery ui site. For instance ui-widget-content is the css that specifies the width of the slider bar and its missing in your slider. Get a css and link it to your page and you should be fine.
Set a left margin or minus half the width of the handle
It also helps to ensure that the values passed to the slider are integer. I had some issues with the pointer of the slider being in the wrong place but when I forced the value to be integer with parseInt() like so:
value: parseInt(whateverValue)
it worked fine.
I find css "translate" property the best option here...
.ui-slider-horizontal .ui-slider-handle {
-webkit-transform: translateX(-2px);
-moz-transform: translateX(-2px);
-ms-transform: translateX(-2px);
transform: translateX(-2px);
}
Adjust translate pixel value to your needs :)