I was really excited to see VS Code finally added a minimap option for easier navigation. However, I've been really frustrated that the translucent rectangle showing your current location in a file only shows up when you hover over the minimap. A visual example of what I mean:
Without cursor:
With cursor:
When using this feature in other editors, I find a lot of value comes from quickly seeing where I am in a file. Does anyone know if there is a setting/extension/hack that will keep the rectangle visible?
From the stable version 1.14 (June 2017) there is an option in settings.json:
"editor.minimap.showSlider": "always"
It appears this is already being tracked in a feature request:
https://github.com/Microsoft/vscode/issues/21784
Of interest to some may be that v1.43 added three new colorCustomizations that affect the minimap slider color, including opacity (last two digits in the settings:
"workbench.colorCustomizations": {
"minimapSlider.background": "#ff000060",
"minimapSlider.hoverBackground": "#ff0000",
"minimapSlider.activeBackground": "#2f00ff50"
}
See https://github.com/microsoft/vscode/pull/90631 and https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_43.md#minimap-background-and-slider-colors
I can't see a way to do it without building VS Code from source as it's just a small change to the minimap.css file of setting the opacity: 0; to opacity: 1;
.monaco-editor .minimap-slider {
opacity: 0;
transition: opacity 100ms linear;
}
I can't override the default css from the user settings with
"editor.minimap-slider.opacity": 1,
But I am a noob at this kind of hack.
Related
I have a menu of small menu items tightly packed together.
After upgrading to Material 14.0.5 the matTooltip appears to have an outer active area of about 3 mm outside its borders. In other words, the tool tip does not hide if I point mouse cursor outside the menu item/element and the pointer is still close to the tool tip - witin about extra 3mm outside the tool-tip borders. In my case the tool tip keeps covering the neighboring items and prevents accessing them if my cursor is close to the tool-tip. I would need to have the too-tip hide as soon as the cursor leaves its borders. It worked fine for me before the upgrade as there was no such area around the tool-tips. Is there a way to reduce the active area around the matTooltip to zero? I tried changing the margins and padding but it did not help.
This appears to work:
::ng-deep .mat-tooltip {
margin: -4px !important;
}
If I add too many/too long captions to a vaadin7 timeline, they will only be displayed partially (i.e. the part we have space for is displayed and the remainder is truncated)
How can I increase this area in order to allocate enough space for all?
timeline.setGraphCaption(container, h.toString());
You need to add these rules in your scss file:
.v-timeline-widget .v-timeline-widget-modelegend{
background: inherit;
}
.v-timeline-widget-legend-label{
height: auto !important;
white-space: normal !important;
}
Before:
After
3 points:
While these rules may not met criteria of well-written CSS or good practice rules (I am looking at you !important), they do the trick. Still, better approach would be to get your hand dirty by editing Vaadin Timeline addon sources.
As you surely noticed text background has changed. That's because we override default background which was designed for only one line (you should provide your own background image)
Bottom of the widget is cut off by few pixels. Well, the only way to fix it is to jump into DOM and css and try fix it. Doable but I haven't tried.
I'm trying to generate a donuts highchart, everything is running good but I can't find the way to make the labels rotate in a radial way.
I've tried:
dataLabels:
{
rotate = 'auto'
}
but no lucky
nothing is documented on Highcharts API http://api.highcharts.com/highcharts
Is it possible or I'm just dreaming?
Unfortunately this option is not supported, but you can try to use http://api.highcharts.com/highcharts#yAxis.labels.formatter and useHTML, then use your own css styles to prepare correct rotation.
I am using flot with the plugin "jquery.flot.axislabels.js", but I can't find other documentation than the README file.
So the general question is "where can I find some complete documentation ?"
And the more specific one is: "How to set the label's color ?"
Some properties are available, such as "axisLabelFontSizePixels", "axisLabelFontFamily", etc... so I've tried "axisLabelColor" and "axisLabelFontColor" without any result.
I tried to use CSS too, according to this: http://people.mozilla.com/~mcote/flot-axislabels/example/
But it does not work either. Maybe CSS is working with an older version of axislabel.js.
Ideally I'd avoid doing this with CSS, I guess that if we are able to choose the font we are able to choose the color. But I cant find what syntax I have to use...
If someone knows something, I'd be glad to read it :-)
Thanks and regards,
S.
From looking at the source code it doesn't look like the plugin provides that option in either of it's two modes of operation:
1.) Draw the labels using the canvas - no ability to set color (only font family and size). If you are handy with JavaScript adding color wouldn't be too difficult. (You are probably using this option since it explains why your CSS doesn't work.)
2.) Draw the labels using HTML DIVs. This is what your linked example does. In it the author specifies the color through an inline CSS tag. How I would do it though to keep it all together is after your plot call:
$('.yaxisLabel').css('color','red');
$('.y2axisLabel').css('color','orange');
$('.y3axisLabel').css('color','green');
$('.y4axisLabel').css('color','purple');
Example here.
I found it simpler to just add !important targeting the classes generated by flot. For targeting axis, you can aim for .yaxisLabel or .xaxisLabel, or for the whole thing target .flot-text.
.flot-text {
color: rgba(255, 255, 255, 0.3) !important
}
I know this question has one accepted answer, but just thought of sharing how I eventually got it working.
FLot version: Flot 0.8.3
I had to explicitly set axisLabelUseCanvas:false and then write a bit of jQuery code:
$('.flot-tick-label').css('color','red');
And there we go, after couple of hours of frustration, it was finally red!
Hope this helps someone who is lost in Flot.
I had to set axisLabelUseCanvas:false explicitly and use $('.axisLabels').css('color','red'); to make them red
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 :)