I have this piece of code that displays a tooltip when a user hovers over the question circle icon. The tooltip content can have a maximum character count of 1000. How do I set the overflow-y to scroll by modifying the tooltip in data-toggle mode?
<i class="fa fa-question-circle" data-toggle="tooltip" title="#participant.DeclineReason" data-placement="bottom"></i>
I have the code for the data toggle in the JS script but how do I modify the tooltip properties:
#this.ScriptBlock(#<script>
$(function (){
$('.pie-chart').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('.pie-chart-notparticipating').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getContrastColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145,
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('[data-toggle="tooltip"]').tooltip(); <-------------//this line here
});
Give max-height and height to a class
.tooltip{
max-height:50px;
height:100px;
overflow-y:scroll;
}
Can’t add a comment as I as I don’t have the rep, but a better solution would be to use auto rather than scroll.
.tooltip {
max-height: 80px;
overflow-y: auto; }
auto doesn’t show a scrollbar when the content doesn't need to scroll.
Related
I'm in process to style the MousePosition provided by Openlayers 3.
However, this question has to do with the behaviour of this MousePosition.
What I want to achieve is:
Insert the MousePosition in a container div -- (Done)
When you hover over the container div, the MousePositon should "think" you're hovering over the map.
I've look at Openlayers buttons. (OpenLayers buttons do what I want to achieve with the div). This buttons have the class .ol-unselectable and are stored inside divs with the class .ol-overlaycontainer-stopevent.
I know that this should not work because of z-index present in the container div.
What should I do to get this working?
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat : ol.coordinate.toStringXY(),
target : $('#coords').get(0),
className : 'whatever-custom'
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: false
}).extend([mousePositionControl]),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
html, body, #map {
width : 100%;
height : 100%;
}
#coords {
position : absolute;
bottom : 0.5em;
left : 0.5em;
z-index : 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol-debug.js"></script>
<div id="map">
<div class="ol-overlaycontainer"></div>
<div class="ol-overlaycontainer-stopevent">
<div id="coords"></div>
</div>
</div>
just add pointer-events:none; to your css class
#coords {
position : absolute;
bottom : 0.5em;
left : 0.5em;
z-index : 1;
pointer-events:none;
}
Hi i have used four div's in this page. if i click one div then it will shows its content by shrinking other divs into 10%.
click here
My problem is, when i click about div then technology and protection divs breaks down to the page and come back.
i want to animate without breaking of that div.
here is my code following for about div click,
//ABOUT CLICK STARTS HERE
$("#about").click(function()
{
$('#about-con').css({'display': 'block', 'width': '45%', 'right': '30%'});
$('#technology-con').css({'display': 'none', 'width': '', 'right': ''});
$('#protection-con').css({'display': 'none', 'width': '', 'right': ''});
$('#distribution-con').css({'display': 'none', 'width': '', 'right': ''});
$("#distribution").animate({'width': '10%', 'float': 'left', 'margin-left': '45%'}, 800);
$('#technology').animate({'width': '10%', 'float': 'left','margin-left': ''}, 800);
$('#protection').animate({'width': '10%', 'float': 'left','margin-left': '-17px'}, 800);
$("#about").css({'width': '25%','float': 'left','margin-left': ''},800);
}); //END OF ABOUT CLICK
css:
#about{
height: 500px;
background-color: red;
cursor: pointer;
width: 25%;
z-index: 5;
}
I have converting from html to pdf by using html2canvas and jspdf.
I am using a3 format pdf but content width ix 1000px. so after 1000px, pdf shows black background.
canvas{
background: #fff !important;
background-color: #fff !important
margin: 0;
}
#cisForm {
padding: 10px;
width: 1000px;
margin: 0;
background: #fff !important;
}
cisForm is body
<script type="text/javascript">
window.onload = function() {
html2canvas(document.body).then(function(canvas) {
background:'#fff',
document.getElementById("cisForm").appendChild(canvas);
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
context.fillStyle="#FFFFFF";
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l, "", "");
doc.addImage(canvas.toDataURL("image/jpeg"),"jpeg",0,0)
window.location=doc.output("datauristring")
});
}
</script>
There is no use for this code. This is converting from html to pdf.
and one more question.
Some limited contents only coming in pdf. Some contents are not coming.
Do we need to set no.of pages anywhere?
How to Remove black background from pdf
Try to set your body background-color to #FFFFFF.
This is because of the width you specified.try to adjust the width or specify in html2canvas options.
Check this out this worked for me
https://github.com/Wildhoney/Canvas-Background#canvas-background
import toDataURL from 'canvas-background';
const canvas = document.querySelector('canvas');
const data = toDataURL(canvas, '#ffffff', {
type: 'image/jpeg',
encoderOptions: 1.0
})
I have:
Single Page App
CSS mega menu that opens on hover
When the user clicks a link, the menu doesn't go away in IE 10/9/8 when I click on the text of the link. If I click on the spacing around the text it goes away.
Pulling my hair out trying to figure this out... it works fine in Chrome/IE11
here is the code that makes it work for Chrome/IE11:
var $a = _i.$(jqEvent.target);
var $menu = $a.closest('.areaNav');
var $tempBlockOut = _i.$('<div class="tempBlockOut"></div>');
$tempBlockOut.appendTo($menu.parent());
var z = $a.closest('.megamenu').css('z-index');
$tempBlockOut.css({ width: '50px', height: '50px', background: 'transparent', position: 'absolute', 'z-index': z }).position({
of: jqEvent
});
setTimeout(function () {
$tempBlockOut.remove();
}, 100);
I'm placing a transparent div where the cursor is so that hover gets reset and the CSS menu disappears when the user selects a link.
the following code fixes this issue for IE10/9/8
$tempBlockOut.css({ width: '50px', height: '50px', background: '#fff', opacity: 0, position: 'absolute', 'z-index': z }).position({
of: jqEvent
});
changed the background to #fff, and set opacity to zero. apparently IE10/9/8 does not register hover on transparent elements.
I set up a fiddle with the following code:
html:
<div id="content">
<input id="splash_button" type="button" value="Splash!" />
<p>OSEIFNSEOFN SOE:NF:SOERNG :SOJld;kkng d;ljrng so;ern gsejng ;seorjse;ongsod;jng;s jdg;ske\ ;sej se gdsrgn sd;orjngsd;oj go;ser o;s en;o jnse;orng;sekorg ;ksjdr ;kgsjurd; gjnsdrgj; s ;hg;kuhg k;sgksdgblsregilsebnvsfdnv sa;kljg ;khg ;zkljdng ;kjsgr; unbzsd;kjgb zk;j xcnbv;kjzb ;kjgrb snbz;gkljznbs;d,jbnzs;dkjvbz;sljbd ;zksjn ;kzjsbng ;kjsbk;zejr ;kgsjg ;kzsjbr ;kjszrb ;zkojg ;oszkrg ;ozsrb;ouszb </p>
</div>
css:
#content{
z-index: 0;
}
javascript(jquery):
$('#splash_button').click(function(){
$('#content').append($('<div id="splash"><a id="hideSplash">hide</a></div'));
// display splash window
var splash_width = 200;
var splash_height = 200;
$('#splash').css({
'z-index': 1,
'width': splash_width + 'px',
'height': splash_height + 'px',
'position': 'absolute',
'left': Math.floor(($(window).width() - splash_width)/2) + 'px',
'top': Math.floor(($(window).height() - splash_height)/2) + 'px',
'z-index': 1,
'border': '1px solid',
'background-color': '#99ccff',
'opacity': '1.0'
});
// set the content's opacity and disabled the input button
$('#content')
.css({
'opacity': '0.4'
})
.children()
.attr('disabled', 'disabled');
// when everything's over, reset properties
$('#hideSplash').click(function(){
$('#splash').remove();
$('#content')
.css({
'opacity': '1.0'
})
.children()
.removeAttr('disabled');
});
});
I expected the splash div to have an opacity of 1, and the content div to have an opacity of 0.4, however, after clicking the button, both divs have an opacity of 0.4.
Any help is much appreciated.
You should append the #splash to the body or another div outside the #content.
When you set an opacity to an element in css, all of his children have the same.
In your exemple the #splash has an opacity of .4 just like the #content.
Try $('body').append instead of $('#content').append