I'm using the eslint extension, and its producing errors in my code. However is there a way to show a error-indicating gutter on the lines with a error? Currently I just have this red underline:
Is there a way to show a high-contrast gutter next to the line number for errors and warnings?
I spent a lot of time and managed to make errors in vs code more visible. Still not in the gutter, but better then nothing. I replaced vs code squiggly error and warning underlines with background and thick underline:
(offtop: also on screenshot you can see how "Bracket Pair Colorizer" extension works :)
Install CSS and JS Loader and carefully follow all instructions (i had problem with link to css, which in windows must be like file:///C:/myfolder/myfile.css ... better read whole extension instructions)
Create a css file with contents:
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* background */
background: #f2e3b3;
/* underline */
border-bottom: 3px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
/* background */
background: #ffc7c7;
/* underline */
border-bottom: 4px solid #ff0000;
}
And place link to it in settings.json like said in CSS and JS Loader extension instructions
"vscode_custom_css.imports": ["file:///C:/yourfolder/youfilewithcustom.css"],
"vscode_custom_css.policy": true,
, then reload...
You can get color box around error (instead of underline, not simultaniously) if you use for example (border: instead of border-bottom: ):
border: 1px solid #ff0000;
Or you can get custom border from any side (right border alone seems to look great, tried this while writing this post)
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
background: #f2e3b3;
border-right: 5px solid #ffc000;
border-bottom: 5px solid #ffc000;
border-top: 3px solid #ffc000;
border-left: 1px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
background: #ffc7c7;
border-right: 5px solid #ff0000;
border-bottom: 3px solid #ff0000;
border-top: 3px solid #ff0000;
border-left: 1px solid #ff0000;
}
This css will only replace squiggle color from green to yellow:
.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* yellow squiggly */
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#FF0'><path d='M5.5 0l-3 3H1.1l3-3z'/><path d='M4 0l2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>") repeat-x 0 100%;
}
As you can see the name of class changed from .greensquiggly to .squiggly-warning, that's why css from previous answer doesn't work.
To find out new error css class i used Help -> Toggle Developer Tools, where after deleting bunch of blocks, i could find the error and warning classes.
Not sure if it helps. If you change all levels of errors in ESLint to warnings and then install extention Custom CSS and JS you will be able to transform green underline to something else.
.monaco-editor.vs .greensquiggly,
.monaco-editor.vs-dark .greensquiggly {
background: rgba(239, 83, 80, 0.2);
border: 1px solid #1976d2;
}
It can appear (greensquiggly) in some other places, but for me this is working.
based on #last-on-space here is a full override + a small enhancement to make sure the styles dont overlap each other on consecutive lines
.monaco-editor .squiggly-warning,
.monaco-editor .squiggly-error,
.monaco-editor .squiggly-info,
.monaco-editor .squiggly-hint {
border-bottom-width: 4px;
border-bottom-style: solid;
box-sizing: border-box !important;
}
.monaco-editor .squiggly-warning {
background: #ffc00030;
border-bottom-color: #ffc000;
}
.monaco-editor .squiggly-error {
background: #ff000030;
border-bottom-color: #ff0000;
}
.monaco-editor .squiggly-info {
background: #0e7fff30;
border-bottom-color: #0e7fff;
}
.monaco-editor .squiggly-hint {
background: #a2eeef30;
border-bottom-color: #a2eeef;
}
also dont forget to add
"editorError.foreground": "#00000000",
"editorWarning.foreground": "#00000000",
"editorInfo.foreground": "#00000000"
"editorHint.foreground": "#00000000"
under workbench.colorCustomizations to hide the original styles
Related
this seems like such a simple thing to do, but I can't seem to do it. I've tried using CSS in my scss file, like this:
.ag-header-cell-text {
font-size: 8px;
color: red;
background-color: red;
}
or like this:
.ag-header-cell
font-size: 8px;
color: red;
background-color: red;
}
but nothing changes, not the color either. setting the headerheight works but doesn't help me. I just want the font smaller.
I've also tried adding a cellStyle property to the columnDefs, but nothing seems to works, nor can I find a solution. Please help.
Adding !important may work.Or maybe your class names don't correct. Check it by f12 (inspect) and correct.
.ag-header-cell-text {
font-size: 8px !important;
color: red !important;
background-color: red !important;
}
.ag-header-cell
font-size: 8px !important;
color: red !important;
background-color: red !important;
}
I have a ListBox:
ListBox lb = new ListBox();
this is my default css for a listbox:
.gwt-ListBox {
background: transparent;
padding: 5px;
border: 1px solid #222;
color: #555;
text-shadow:1px 1px 0px #ffffff;
text-decoration:none;
font-family:arial;
height: 40px;
font-size:16px;
font-weight:bold;
cursor: pointer;
}
I want to modify the background at runtime:
lb.getElement().getStyle().setBackgroundColor("#aaa");
this seems to remove all styling, and I get a really ugly listbox. What am I doing wrong?
Thanks
A working and more maintainable way of doing this is using a CSS client bundle, see:
http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html
and
http://www.gwtproject.org/doc/latest/DevGuideUiCss.html
Put the parts of the style that you want to vary in a CssResource and apply the extra style. To give you an idea of how to do this:
MyWidget.css:
.backgroundA {
background: #aaa;
}
MyWidget.java:
interface MyWidgetCssResource extends CssResource {
String backgroundA();
}
MyWidgetCssResource resource;
lb.getElement().addStyleNames(resource.backgroundA());
I tried to override a few css properties of the gwt-DisclosurePanel and gwt-DisclosurePanel-open rules to try and remove the vertical line but failed to do so. Here is the image:
How do I remove this vertical line?
The border line in the DisclosurePanel content comes from this rule (in Clean theme as an example):
.gwt-DisclosurePanel .content {
border-left: 3px solid #e7e7e7; // Here is your border
padding: 4px 0px 4px 8px;
margin-left: 6px;
}
Always use Firebug for Firefox or Chrome's built in Developer Tools to debug issues like that. You would get the required CSS rule to override in just a few seconds.
I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!
You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.
I have a Telerik tree and drag & drop node move is in action. But then I applied a theme (bought from somewhere) to the overall design of my site, and now, the hint are gone.
When you drag a node, some horizontal hint lines appear, so that you can understand that if you release your node (drop it) where it would be dropped.
Try adding the following CSS to the page. It will force the styles upon the TreeView drop hint.
.rtDropAbove, .rtDropBelow {
border: 1px dotted black !important;
font-size: 3px !important;
height: 3px !important;
line-height: 3px !important;
margin-top: -1px !important;
}
.rtDropAbove {
border-bottom: 0 !important;
}
.rtDropBelow {
border-top: 0 !important;
}
Something's z-index property is messing up with Telerik's RadTree. It's all z-index stuff.