I am trying to scatter chart tooltip with scrollbar, Please refer to the above jsfiddle and provide solution.
`https://jsfiddle.net/uyj18zm9/6/`
You need to add style overflow-y: scroll and set some height.
tooltipString = '<div class="..." style="...; height: 80px; overflow-y: scroll">';
Live demo: https://jsfiddle.net/BlackLabel/fo6jm7gL/
CSS overflow-y: https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
Related
I have to resize the annotation label size(div) based on the annotation text height (span). I have attached the screenshot by removing the CSS of text but its overlapped the border/label size. Is there any option to dynamically update the SVG element height based on the inner text(Span).
You can enable useHTML option and apply proper CSS styles:
.highcharts-annotation-label > span {
height: 40px;
overflow: auto;
}
Live demo: http://jsfiddle.net/BlackLabel/8bwe70y5/
API Reference: https://api.highcharts.com/highcharts/annotations.labels.useHTML
Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction.
Currently if I insert the tags then the height of the div increases.
What I want is that If I go on inserting the tags then it should scroll in X-direction
I have tried:
width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;
But it didn't work as expected
So let me know where I am wrong.
I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.
For the X direction:
This can get a bit ugly if you decide to set a min-width or width on your tags.
The only way I've found to do it in the X direction is using flexbox:
tags-input .tags .tag-list {
display: flex;
flex-direction: row;
overflow-x: auto;
}
tags-input .tags .tag-item {
/* Applying this display class */
display: inline-table;
/* OR set the tag width to ensure that the text is visible */
min-width: 150px; /* Could also use width: 123px */
}
This Github issue is also directly related to the problem.
For the Y direction:
Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:
.tags {
height: 34px;
overflow-y: scroll;
}
Try This
simple css to add on tags-input class for scroll on x and y axis
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}
I'm creating a theme for Highcharts and need to be able to configure the shadow angle on the tooltips. In some configuration areas, shadow allows for an object (ex: plotOptions.pie.dataLabels.shadows) but it seems that the shadow setting on tooltip does not allow this. Is there a workaround or a global setting I'm missing?
You can put css-style on your tooltip, in that way you can setup your shadow like that :
First deactivate the default shadow :
tooltip: {
valueSuffix: '°C',
shadow:false,
useHTML:true,
formatter: function() {
return '<div class="tooltip">Test</div>';
}
// Replace "Test" with the formatter you want, there are good examples
// on their website.
}
And set the style of your tooltip :
div.tooltip {
-moz-box-shadow: 20px 20px 20px #888;
-webkit-box-shadow: 20px 20px 20px #888;
box-shadow: 20px 20px 20px #888;
}
Here is an live example : http://jsfiddle.net/PKFSs/
With that you can do whatever you want on your tooltip.
EDIT :
If you can't use css :
formatter: function() {
return '<div class="tooltip" style="-webkit-box-shadow: 20px 20px 20px #888;box-shadow: 20px 20px 20px #888;">Test</div>';
}
I know it is not the best way, I'm trying to find a better solution, but this one works.
If i have many events for a day then the height of month view is increased but the vertical scroll-bar is not displayed because of which i am unable to see all events, Scroll-bar is displayed correctly in Week view.
jquery fullcalendar scrollbar in basic month view.
please modify below class in fullcalendar.css file
.fc-view {
width: 100%;
height: 550px;
position: absolute;
bottom:0;
overflow-y: scroll;
}
I have a simple footer that I want fixed to the bottom of the browser. I want to be able to resize it vertically only. The problem I have is that once I apply jQuery UI Re-sizable it sets the position to relative which obviously messes up the original intent of the layout.
Below is a simple example using JSBin of my problem.
http://jsbin.com/ubuhic/
Thoughts?
$(function () {
$('footer').resizable({
handles: 'n, s'
}).bind('resize', function(){
$(this).css("top", "auto");
});
});
This code works perfectly for me. http://jsbin.com/ubuhic/11
footer
{
height: 200px;
bottom: 0px;
position: fixed !important;
width: 100%;
background-color: #cc0000;
}
!important should do the trick...