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
Related
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
I am using mat-select to display a list of options so when you click on the mat-select input filed, it shows a list of options using cdk-overlay-pane. The overlay container width gets set the same as mat-select input field. However, it adds extra width of 32px to display animation. This forces the container to appear outside the screen width Is there any way of the adjust the width of the the cdk-overlay-pane container width.
Try this code, it works but it is not dynamic.
::ng-deep .mat-form-field {
width: 50px !important;
}
::ng-deep .mat-label {
width: 50px !important;
}
::ng-deep .mat-select {
width: 50px !important;
}
::ng-deep .mat-option {
width: 50px !important;
}
I'm trying to use the md-chips directive of angular material in a single line, but when I add more chips than size of a field, the field add a line to bottom like in this image.
I think you need a CSS workaround to adapt the behaviour of md-chips in an input form.
For example you can use this CSS:
/* reduce input element (not visible till the user begins editing) width */
.md-chips .md-chip-input-container input {
max-width: 20px;
}
/* adapt input to md-chip height */
.myheight {
height: 49px !important;
}
/* adapt datepicker input to md-chip height */
.md-datepicker-input {
height: 49px;
}
Here is a demo: http://codepen.io/beaver71/pen/gPqPBW
P.S.: don't forget that docs declare:
Warning: This component is a WORK IN PROGRESS. If you use it now, it will probably break on you in the future.
I am attempting to use flexbox to achieve a series of sections that fill 100% width and height of the viewport. This works perfectly on desktop without any issues when resizing the browser window. On mobile however, whenever I change the orientation, the section sizing does not adjust correctly.
I have made a pen of my issue:
http://codepen.io/beefchimi/full/LlInw/
The flexbox css is:
main {
display: flex;
flex-flow: row wrap;
}
section {
display: flex;
flex: 1 0 100%;
height: 100vh;
}
article {
margin: auto;
}
I believe my implementation is correct... but I'm very surprised to see iOS not behaving as expected. Any suggestions on solving this problem?
Thanks!
Turns out this is an iOS 6 - 7 bug. More information can be found here:
https://github.com/scottjehl/Device-Bugs/issues/36
The github issue thread suggests a js plugin:
https://github.com/rodneyrehm/viewport-units-buggyfill
For my particular case, I simply implemented my own bit of jQuery that will measure the window height on window load, apply that value to all sections, then track the window height during window resize and reapply. An unfortunate work around :(
var $window = $(window),
$sections = $('section'),
windowHeight;
function adjustHeight() {
// get height of browser window on page load and resize events
windowHeight = $window.height();
// apply windowHeight to each <section>
$sections.height(windowHeight);
}
$window.resize(function() {
adjustHeight();
});
$window.load(function() {
adjustHeight();
});
Is there a way to modify the Twitter 'follow' button to display the number of followers in a bubble but hide the word "followers"? I basically want my 'follow' button to look the same as the 'tweet' button.
The current code looks like this:
<a href="https://twitter.com/User" class="twitter-follow-button" data-show-count="true"
data-show-screen-name="false" data-dnt="true">Follow #User</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I had this same issue and solved it by basically hiding the word 'followers' and creating a fake right edge to the bubble, if that makes sense. So, you have to wrap the button in its own div, then hide the overflow of that div and set the width to the exact point where the word disappears and the height precisely to the height of the button you are using. Here's a code example:
#titter-div {
border-radius: 4px; /* to mimic the curved edges of the count box */
border-right: 1px solid #AAAAAA; /* this is the width and color of the count box border */
height: 20px; /* this height works for the medium button */
width: 88px; /* precise width to hide the word */
overflow: hidden; /* actually hides the word */
}
This worked for me to create exactly what you are looking for. Hope this helps.
To display the number of followers in a bubble but hide the word "followers", here is the code I use with an iframe :
<iframe
src="//platform.twitter.com/widgets/follow_button.html?screen_name=Vacance_Luberon&show_screen_name=false"
style="width: 88px; height: 20px;"
allowtransparency="true"
frameborder="0"
scrolling="no">
</iframe>